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

#jquery #forms #html #button #radio

#HTML #jquery #формы #переключатель

Вопрос:

Я, по сути, новичок в программировании (формы html5, CSS3, а теперь и jQuery).

То, что я пытаюсь сделать, это прикрепить imageswap (что я и сделал) к переключателю. Итак, что я делаю, это заменяю кнопки изображениями, каждая из которых имеет «нажатую» версию. Однако, прежде чем даже присоединять его к функции формы / вводу переключателя, я хочу найти способ, чтобы, когда я нажимаю одну кнопку, она переключала другие изображения обратно в «не нажатое». По сути, так, чтобы одновременно можно было «нажимать» только одно изображение.

Прямо сейчас код для меня нажимает изображения

     $(function() {
        $(".img-swap1").live('click', function() {
            if ($(this).attr("class") == "img-swap1") {
                this.src = this.src.replace("_U", "_C");
                } else {
                    this.src = this.src.replace("_C","_U");
                }
            $(this).toggleClass("on");
        });

        });

Я подумал об использовании оператора if, чтобы вернуть все «_C» (щелкнул) обратно в «_U» (не щелкнул).

Надеюсь, я включил достаточно информации.

Ответ №1:

Хороший способ решения этой проблемы — применить состояние без щелчка ко ВСЕМ вашим элементам, а затем сразу после этого применить состояние щелчка к целевому элементу.

Кроме того, ваш оператор if ($(this).attr("class") == "img-swap1") является избыточным — он всегда будет true, потому что он совпадает с исходным селектором $(".img-swap1").live('click'...

Попробуйте

 $(function() {
  $(".img-swap1").live('click', function() {
    $(".img-swap1").removeClass('on').each(function(){
      this.src = this.src.replace("_U", "_C");
    });
    this.src = this.src.replace("_C","_U");
    $(this).addClass("on");
  });
});

1. Спасибо! Это сработало для меня 🙂 Однако по какой-то причине U / C были отменены (щелчок переводил его в незакрытое состояние), поэтому мне пришлось отменить _U и _C в приведенном выше. Большое спасибо.

2. Ha! Упс, это справедливо. Я мог бы догадаться, что _U это обозначается как unclicked .

3. Есть ли способ сделать это без использования «this.src», например «$ («.img-swap1″).src» — существует ли это?

4. $('.img-swap1').attr('src','newsrc.jpg'); , но если ваш селектор соответствует нескольким изображениям, он поменяет атрибут на каждое сопоставленное изображение. Вот почему в коде ответа я использовал $('.img-swap1').each(function(){ // etc. }); , потому что это эффективный способ выполнить операцию над каждым элементом, сопоставляемым селектором, но при этом убедитесь, что код нацелен на них по одному за раз. Если вы действительно предпочитаете не изменять напрямую src по какой-либо причине, вы можете использовать $(this).attr('src',$(this).attr('src').replace('_C','_U'));

Ответ №2:

Если я правильно понял вопрос, для вас может сработать следующее:

 $(function(){
    $('.img-swap1').live('click', function() {
        $('.img-swap1').removeClass('on').each(function(){
            $(this).attr('src', $(this).attr('src').replace("_C", "_U")); // reset all radios
        });
        $(this).attr('src', $(this).attr('scr').replace("_U", "_C")); // display pressed version for clicked radio
        $(this).toggleClass("on");
    });
});

Я надеюсь, что это поможет.

1. $('.img-swap1').src.replace("_C", "_U") не будет работать, потому что элементы jQuery не имеют src свойства. Помните, $(selector) всегда возвращает объект, подобный массиву.

2. @DanielMendel Хороший звонок! Я следовал логике OP и полностью разнесен.