Замена изображения радиокнопки jQuery

Question

Я принципиально новичок в кодировании (html5-формы, CSS3, а теперь и jQuery).

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

В настоящий момент код для моих нажатых изображений:

    $(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» (не кликнул).

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

Answer 1

Хорошим способом решения этой проблемы является применение состояния без клика к ALL вашим элементам, а затем сразу же после этого применяется состояние щелчка к целевому элементу.

Кроме того, ваше выражение if ($(this).attr("class") == "img-swap1") является избыточным - оно всегда будет истинным, поскольку оно совпадает с исходным селектором $(".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");
  });
});

Answer 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");
    });
});

Надеюсь, это поможет.