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

У меня есть список div с изображениями в них:

<div class="wizard-img"><%= image_tag("sources/pix/nyt.png") %></div>
<div class="wizard-img"><%= image_tag("sources/pix/theguardian.png") %></div>

Когда пользователь щелкает div, я бы хотел, чтобы изображение изменилось на x-on.png, при повторном нажатии оно изменится на x-off.png, а при третьем нажатии оно должно вернуться к x. png.

Можно ли это сделать без ручного указания jQuery для каждого изменения изображения? Могу ли я пройти через div и найти имя изображения и просто добавить -off/-on к изображению?

Спасибо!


user-interface jquery css css-sprites
person hejog    schedule 30.06.2009    source источник

Ответы (8)


arrow_upward
22
arrow_downward

Возможно, вам подойдут CSS-спрайты?

Это избавит вас от загрузки отдельного изображения каждый раз, когда вы нажимаете изображение (кнопку?), И вы можете решить свою проблему, добавляя и удаляя класс css, например:

$('.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');
        }
    }
);
person nikc.org    schedule 30.06.2009
comment
Оба состояния будут загружены и готовы, когда пользователь нажмет кнопку, о, и вы уменьшите свои запросы, что всегда является хорошей идеей :) - person Tom; 30.06.2009
comment
Это, без сомнения, путь, который я бы выбрал, чтобы добиться того, что нужно спрашивающему. - person Travis; 30.06.2009

arrow_upward
10
arrow_downward

http://docs.jquery.com/Events/toggle#fnfn2fn3.2Cfn4.2C...

$(".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"});
  }
);
person jeroen.verhoest    schedule 30.06.2009
comment
Удалено в jQuery 1.9. - person Jeff Dunlop; 05.02.2015

arrow_upward
3
arrow_downward

CSS Sprites действительно были бы способом сделать это, но для полноты картины вот еще один вариант.

Обычно я последний, кто обращается к регулярному выражению, но я думаю, что здесь они помогут.

$('.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'));
    }
});
person Dan F    schedule 30.06.2009

arrow_upward
1
arrow_downward

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

person Deniz Dogan    schedule 30.06.2009
comment
каждая кнопка имеет разные изображения [и разные изображения переключения]? - person hejog; 30.06.2009
comment
Я не знаю, сколько изображений, но если их всего несколько, подход, который я предложил, все еще работает - просто примените другой класс, например. один, два или три в зависимости от того, в каком состоянии находится кнопка. - person Deniz Dogan; 30.06.2009

arrow_upward
1
arrow_downward

Я нашел этот плагин полезным, чтобы сделать что-то похожее на то, что вы просили:

http://www.malsup.com/jquery/cycle/

person Steve Ingram    schedule 19.04.2011

arrow_upward
0
arrow_downward 

$("img").hover(
    function() { this.src = this.src.replace("_Off", "_On");},
    function() { this.src = this.src.replace("_On", "_Off");
});

http://kaidez.com/tutorial-simple-efficient-jquery-image-rollover/

person Syed    schedule 04.01.2013

arrow_upward
0
arrow_downward

Я создал плагин swapimg: http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
use: $('.swapimg').swapimg();
opt: $('.swapimg') .swapimg({imgOn:"_on.png", imgOff:".png"});

(function($){
    $.fn.swapimg=function(options){
        var defaults={imgOn:"_on.gif",imgOff:".gif"};
        var options=$.extend(defaults,options);
        var $isOn=false;
        var $obj_index=-1;
        return this.each(
            function(){
                if($(this).is('img')){
                    obj=$(this)
                }
                else{
                    obj=$(this).find('img')
                }
                obj.hover(
                    function(){
                        if(this.src.indexOf('_on')==-1){
                            $isOn=false
                        }else{
                            $isOn=true
                        }

                        if($isOn==false){
                            this.src=this.src.replace(options.imgOff,options.imgOn)
                        }
                    },
                    function(){
                        if($isOn==false){
                            this.src=this.src.replace(options.imgOn,options.imgOff)
                        }
                    }
                )
            }
        )
    }
})(jQuery);
person xuannd    schedule 09.07.2013

arrow_upward

arrow_downward

person    schedule
comment
извините, под x я имел в виду имя изображения в div, так что это будет nyt, theguardian и т. д. и т. д. можно ли выбрать это через jquery? - person hejog; 30.06.2009