使用jQuery更改除当前单击之外的所有类的src

时间:2012-01-23 16:01:32

标签: jquery html css forms

这基本上是一个不刷新页面的菜单。我试图一次只激活一个图像,并且在取消选择以前选择的菜单选项时遇到问题。也就是说,这更像是一个复选框,而不是一个收音机盒。

$(function(){
    $(".img-swap").live('click', function() {
        if ($(this).attr("class") == "img-swap") {
            this.src = this.src.replace("_off","_on");
        } else {
            this.src = this.src.replace("_on","_off");
        }
    });
});

这是jQuery试图修改的代码

<div id="feedback-topic.buttons">
    <a href="#bug"><img src="lib/feedback-bug_off.jpg" alt="bug" width="75" height="49" border="0" class="img-swap" /></a>
    <a href="#content"><img src="lib/feedback-site_content_off.jpg" alt="bug" width="121" height="49" border="0" class="img-swap" /></a>
    <a href="#suggestion"><img src="lib/feedback-suggestion_off.jpg" alt="bug" width="117" height="49" border="0" class="img-swap" /></a>
</div>

但我无法弄清楚我的生活如何取消选择(更改src.replace)所有按钮,不包括刚刚点击的选项。

当提交所有这些内容的表单时,还有任何想法如何选择将哪个选项传递到下一页?我想我应该有一个不可见的形式,根据选择的内容而改变,或者有更简单的方法来实现这个目标吗?

2 个答案:

答案 0 :(得分:1)

尽管有关于表单提交的内容,但是如果所有匹配的元素都是this,那么切换 .not(this)以外的所有内容的方法是使用$(this).siblings()this实际上是this.src = this.src.replace('_off', '_on'); $('.img-swap').not(this).attr('src', function(index, attr) { return attr.replace('_on', '_off'); }); 的兄弟姐妹:

.attr()

这使用src的{​​{3}}来修改匹配元素的{{1}}属性。

callback version

的工作演示

答案 1 :(得分:0)

首先将ON替换为OFF,然后使用$(this).addClass(“_ on”)认为可行。

<强>更新 快速读取它,没看到你正在切换图像。

将图像src放在css中。 .on和.off类然后你就不会切换源。