переключатель jQuery для изменения изображения

Все руководители проектов должны иметь задачи по кодированию

В тех командах, в которых я работал, руководитель проекта был программистом, который достаточно хорошо понимал технические вопросы кода, чтобы Для выполнения задач кодирования принятым решениям не хватало коммуникационного разъединения, которое часто происходит в командах, где руководитель проекта не участвует в коде.

11
задан Jim G. 2 November 2009 в 13:25
поделиться

5 ответов

Perhaps CSS sprites would work for you?

That would save you from loading a separate image every time you click the image (button?), and you could solve your problem by adding and removing a css-class, e.g.:

$('.wizard-img').click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off');
        } else {
            $(this).addClass('on');
        }
    }
);
22
ответ дан 3 December 2019 в 01:45
поделиться

http://docs.jquery.com/Events/toggle

$(".wizard-img").toggle(
  function () {
    $(this).find("img").attr({src:"x-on.png"});
  },
  function () {
    $(this).find("img").attr({src:"x-off.png"});
  },
  function () {
    $(this).find("img").attr({src:"x.png"});
  }
);
10
ответ дан 3 December 2019 в 01:45
поделиться

CSS Sprites would indeed be the way to do this, but just for completeness, here's another option.

Normally I'm the last to reach for a regexp, but I think they'll help here

$('.wizard-img').click(function() {
    var $img = $(this).find('img') ,
        src = $img.attr('src') ,
        onCheck = /\-on\.jpg$/ ,
        offCheck = /\-off\.jpg$/ ,
        normal = /\.jpg$/
    ;

    if(src.match(onCheck)) {
        $img.attr('src', src.replace(onCheck, '-off.jpg'));
    } else if (src.match(offCheck)) {
        $img.attr('src', src.replace(offCheck, '.jpg'));
    } else {
        $img.attr('src', src.replace(normal, '-on.jpg'));
    }
});
3
ответ дан 3 December 2019 в 01:45
поделиться
$('.wizard-img').click(function() {
    var img = $(this).find('img');
    var src = img.attr('src');

    //image is neither on nor off, so change src to on and return
    if(src != 'x-on.png' && src != 'x-off.png') {
        img.attr('src','x-on.png');
        return false;
    }

    //image is on, so change src to off and return
    if(src == 'x-on.png') {
        img.attr('src','x-off.png');
        return false;    
    }

    //image is off, so change src to x and return
    if(src == 'x-off.png') {
        img.attr('src','x.png');
        return false;    
    }
});
0
ответ дан 3 December 2019 в 01:45
поделиться

FWIW, я предлагаю вам сделать это, используя простой CSS и background-image . Мне кажется, что это не совсем обычные картинки, а скорее «кнопки».

1
ответ дан 3 December 2019 в 01:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: