0

ボタンがクリックされたときにそれを取得しようとしています。すべてのボタンにオフ状態が与えられ (src は btnCircuitxOff.gif)、選択されたボタンにはオン状態が与えられます (src は btnCircuitxOn)。

つまり、1 つをクリックすると、他の選択が解除され、それ自体が選択されます。これは、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"));  
}

何かをクリックするとすぐに、すべての画像が個々の btnCircuitxOff 画像ではなく btnCircuit100Off に置き換えられることを除いて、これはほとんど機能しているようです。

ほぼ解決策があると確信していますが、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 に答える