0

我试图在单击按钮时获取它，所有按钮都处于关闭状态（src 是 btnCircuitxOff.gif），并且选定的按钮处于打开状态（src 是 btnCircuitxOn）

也就是说，单击一个将取消选择其他并选择自身，这只是 ajax 查询另一端物理设备的视觉反馈，否则我会使用单选按钮本身。

到目前为止，我有，

html/css

<div id='controls'>
<input type="image" class = "Circuit _100" src="btnCircuit100Off.gif" onclick="selectCircuit('100');"/>
<input type="image" class = "Circuit _10K" src="btnCircuit10KOff.gif" onclick="selectCircuit('10K');"/>
<input type="image" class = "Circuit _100K" src="btnCircuit100KOff.gif" onclick="selectCircuit('100K');"/>
<input type="image" class = "Circuit _1M" src="btnCircuit1MOff.gif" onclick="selectCircuit('1M');"/>
<input type="image" class = "Circuit _10M" src="btnCircuit10MOff.gif" onclick="selectCircuit('10M');"/>
<input type="image" class = "reset" src="btnReset.gif" onclick="reset();"/>
</div>

Javascript

function selectCircuitButtons(s) 
{
  $(".Circuit").attr("src",$(".Circuit").attr("src").replace("On","Off"));
  $("._"+s).attr("src",$("._"+s).attr("src").replace("Off","On"));  
}

这几乎似乎有效，除了一旦我点击某些东西，每个图像都会被替换为 btnCircuit100Off 而不是它们各自的 btnCircuitxOff 图像。

我几乎可以肯定我几乎有一个解决方案，但是如何存储每个选择器以在编辑 src 元素时使用？

我看过 .each 和 $(this) 但我是 JQuery 新手，在制定解决方案时遇到了麻烦。

也欢迎提出好标题的建议。

4

3 回答 3

1

您需要读取每个元素的属性的当前值，而不是始终读取单个值。

为了帮助你，jQuery 允许你传递一个回调：

$(".Circuit").attr("src",
    function(elem, oldSrc) { return oldSrc.replace("On","Off"); }
);
于 2013-09-02T15:53:44.280 回答
1

您可以使用 $.each 遍历每个匹配项

function selectCircuitButtons(s) {
    $(".Circuit, ._"+s).each(function(index,item){
        $(item).attr("src",$(item).attr("src").replace("On","Off"));
    });
}
于 2013-09-02T15:55:22.360 回答
0

  1. 您需要使用循环遍历电路$.each

  2. 您必须沿元素切换每个图像名称是否具有类：

    function selectCircuitButtons(s) {

    $(".Circuit").each(function() {
         var hasS = $(this).hasClass("_"+ s);
         if(hasS) {
             $(this).attr("src", $(this).attr("src").replace("Off","On"));
         } else {
             $(this).attr("src", $(this).attr("src").replace("On","Off"));
         }
    });
}

编辑更简单（使用@SLaks 技术）：

function selectCircuitButtons(s) {

    $(".Circuit").attr("src", function(elem, oldSrc) {
        return $(elem).hasClass("_"+ s) ?
            oldSrc.replace("Off","On") : oldSrc.replace("On","Off");
    });
}
于 2013-09-02T16:19:19.247 回答