Question

我本质上是编码的新手（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”（未点击）。

希望我已经提供了足够的信息。

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

我希望这会有所帮助。

jQuery单选按钮图像交换

2 个答案: