複数のスパンに一致するようにテキストを切り替えます

Question

私は、2つの異なるテーブルにクラス "トグル"を持つスパンを持っています。私はスパンのテキストを前後に切り替えるいくつかのjQueryコードを持っていますが、それはうまくいきますが、私が苦労しているのは、クリックしたときに両方のスパンを同時に切り替える方法です。

私はそれらの両方を選択し、コードを実行望んonclickのオブジェクトとしてspan[class='toggle']を使用して試してみたが、それは

$("span[class='toggle']").on("click", function() { 
    var oldText = $(this).text(); 
    var newText = $(this).data('text'); 
    $(this).text(newText).data('text', oldText); 
}); 

Here's a fiddle to demo:

Answer 1

を動作しませんでしたあなたは内部each()ループを追加することができますクリックコールバック関数を使用して、どの入力がクリックされても入力ごとにコードを実行できます。私はあなたを理解しているし、あなたは両方が同じ値に

を切り替えたいと仮定すると、Fiddle

$("span[class='toggle']").on("click", function() { 
    $("span[class='toggle']").each(function() { 
    var oldText = $(this).text(); 
    var newText = $(this).data('text'); 
    $(this).text(newText).data('text', oldText); 
    }) 
}); 

Answer 2

要素$(this)のコンテキストは、ループ内の現在の要素がクリックされていません置き換える： $を（この）.text（newText）.data（ 'text'、oldText）;

と：

$（ "スパン[クラス= 'トグル']"）、テキスト（をnewText）.dataセクション（ 'テキスト'、oldText）;。

これにより、両方のスパンをクリックすると新しいテキストに更新されます。

Answer 3

簡単です。

$(this)を$("span[class='toggle']")に置き換えてください。

「オンクリック」機能を使用している場合。あなたはクリックされた要素である$（this）を呼び出します。そのため、テキストは1つだけスパンに変更されます。 JS

$("span[class='toggle']").on("click",function() { 
    var oldText = $(this).text(); 
    var newText = $(this).data('text'); 
    $("span[class='toggle']").text(newText).data('text',oldText); 
}); 

はここjsFiddleです。

Answer 4

ここではほとんど変更を加えずに動作しています。 $(this).text(newText).data('text', oldText);はthisを使用しており、現在clickspanのクラステキストを参照しています。

$("span[class='toggle']").on("click",function() { 
 
    oldTxt = $(this).text(); 
 
    newTxt = $(this).data('text'); 
 
    console.log(oldTxt+" "+newTxt); 
 
    $("span[class='toggle']").text(newTxt).data('text', oldTxt); 
 
});

span { 
 
    color: #18c; 
 
    cursor: pointer; 
 
} 
 
span:hover { 
 
    text-decoration: underline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="table1"> 
 
<span class="toggle" data-text="Analysis View">Reports View</span> 
 
</div> 
 
<div id="table2"> 
 
<span class="toggle" data-text="Analysis View">Reports View</span> 
 
</div>