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”（单击）恢复为“_”（未单击）

---

希望我已经包含了足够的信息。

如果我正确理解了这个问题，以下内容可能适用于您：

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

---

我希望这有帮助。

如果我正确理解了这个问题，以下内容可能适用于您：

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

---

我希望这会有所帮助。

解决此问题的一个好模式是将未点击状态应用于所有元素，然后立即将点击状态应用于目标元素

此外，您的if语句

（$（this）.attr（“class”）==“img-swap1”）

是多余的——它将始终为true，因为它与原始选择器

$（“.img-swap1”）.live（'click'…

试一试

---

解决此问题的一个好模式是将未点击状态应用于所有元素，然后立即将点击状态应用于目标元素

此外，您的if语句

（$（this）.attr（“class”）==“img-swap1”）

是多余的——它将始终为true，因为它与原始选择器

$（“.img-swap1”）.live（'click'…

试一试

---

$（'.img-swap1'）.src.replace（'.img-swap1'）不起作用，因为jQuery元素没有
src
属性。请记住，
$（选择器）
总是返回类似数组的对象。@DanielMendel调用得很好！我遵循了操作逻辑并完全隔开了。
$（'.img-swap1'）.src.replace（'.img-swap1'），“\U”）
不起作用，因为jQuery元素没有
src
属性。记住，
$（选择器）
总是返回一个类似数组的对象。@DanielMendel很好的调用！我遵循了运算逻辑并完全隔开了。谢谢！这一个对我有效：）出于某种原因，但是U/C被反转了（点击将其置于未被点击状态）因此我不得不反转上面的_和_C。非常感谢。哈！哇，这很公平。我可以猜到，
\U U
表示未被点击。有没有一种方法不使用“this.src”，例如“$”（.img-swap1”）.src”-这是否存在？
$（'.img-swap1'）.attr（'src'，'newsrc.jpg'）；
，但是如果选择器匹配多个图像，那么它将在每个匹配的图像上交换属性。这就是为什么我在回答代码中使用了
$（'.img-swap1'）。每个（函数（）{//etc}）；
因为这是对选择器匹配的每个项目执行操作的有效方法，但仍然确保代码一次只针对一个项目。如果出于某种原因不想直接修改
src
，可以使用
$（this.attr（'src'，$（this.attr（'src'）。replace（'U C'，'U'））
谢谢！这一个对我有用：）但是由于某种原因U/C被反转了（点击将其置于未锁定状态），所以我不得不在上面反转_U和_C。非常感谢。哈！哇，这很公平。我可以猜到，
\U
表示未锁定。有没有不使用“This.src”的方法来实现这一点，例如“$（“.img-swap1”）.src”-这是否存在？
$（'.img-swap1'）.attr（'src'，'newsrc.jpg'）；
，但是如果选择器匹配多个图像，那么它将在每个匹配的图像上交换属性。这就是为什么我在回答代码中使用了
$（'.img-swap1'）。每个（函数（）{//等）；
因为这是对选择器匹配的每个项目执行操作的有效方法，但仍要确保代码一次只针对一个项目。如果出于某种原因不想直接修改
src
，可以使用
$（this.attr（'src'，$（this.attr（'src'）。replace（'U C'，'U'）；