jQuery複数の切り替え、表示/非表示のテキストの変更

Question

長時間のlurker初めてのasker！ これは私の最初の質問ですので、私が間違って聞いていると謝ります！

私はこれについて既に質問されているようではありませんでした。

私はお互いに独立して動作する複数のトグルが必要です。

私は別のスレッドからコードを取得しましたJquery - How to have multiple toggle on one page?なぜこれがうまくいくのかはよく分かりませんが（しかしそれはかなりうまくいきます）、拡張トグルの表示されたテキストを 'show'から一度クリックすると「隠す」。

私はこの作業を1つのトグルだけで行うことができましたが、複数のトグルでは動作しません。私は2つのコードを一緒にマッシュアップして、おそらく本当に明白なものがないだろう。

私はこれを実行することはできません。両方とも同時に変更されています。異なる名前の複数の関数を作成しなくても、それらを独立して変更します。

私はjavascript/jQueryの完全な初心者ですので、本当に明白なものが見つからないか、まったく不可能かもしれませんが、あなたの助けが大いに評価されるでしょう！ここで

は、私がこれまで持っているコードです：

HTML

<div> 
<p><a class="toggle-trigger">Show</a><span>list 1</span><p> 
<div class="toggle-wrap"> 
    <div class="style-single"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    </ul> 
    </div> 
</div> 

<p><a class="toggle-trigger">Show</a><span>list 2</span><p> 
<div class="toggle-wrap"> 
<div class="style-single"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    </ul> 
    </div> 
</div> 

</div> 

jQueryの

$(".toggle-trigger").click(function() { 
    $(this).parent().nextAll('.toggle-wrap').first().slideToggle(); 

        var txt = $('.toggle-trigger').html(); 

      if (txt == 'hide'){ 
        $('.toggle-trigger').html('show'); 
      } else { 
        $('.toggle-trigger').html('hide'); 
      } 


}); 

Answer 1

：（は、コードをより読みやすくEDIT：）

はこれを試してみてください。同じクラスのすべての要素にクラスセレクタポイントを再度使用する

以下のようにスクリプトを変更すると、期待どおりに動作するはずです。あなたがHTML私は別のスレッドのjQueryから、このためのコードを拾ってきた

$(".toggle-trigger").click(function() { 
     $(this).parent().nextAll('.toggle-wrap').first().slideToggle(); 

     var txt = $(this).html(); 

     if (txt == 'hide'){ 
       $(this).html('show'); 
     } else { 
       $(this).html('hide'); 
     } 
    }); 

Answer 2

あなたが閉じるのdivを忘れてしまったように見えます。同一のセレクタで同じ機能を使用することもできません。また、あなたのテキストはあなたが望むものの正確なものです。これは混乱することがあります。あなたが現在の要素を指すように$(this)を使用する必要があります

$(".toggle-trigger").click(function() { 
 
    $(this).parent().nextAll('.toggle-wrap').first().slideToggle(); 
 

 
      var txt = $('.toggle-trigger').html(); 
 

 
      if (txt == 'Hide '){ 
 
        $('.toggle-trigger').html('Show '); 
 
      } else { 
 
        $('.toggle-trigger').html('Hide '); 
 
      } 
 

 

 
}); 
 

 

 
$(".toggle-trigger-2").click(function() { 
 
    $(this).parent().nextAll('.toggle-wrap').first().slideToggle(); 
 

 
     var txt = $('.toggle-trigger-2').html(); 
 

 
     if (txt == 'Hide '){ 
 
       $('.toggle-trigger').html('Show '); 
 
     } else { 
 
       $('.toggle-trigger').html('Hide '); 
 
     } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p><a class="toggle-trigger" style="color: blue; ">Show </a><span>list 1</span><p> 
 
    <div class="toggle-wrap"> 
 
     <div class="style-single"> 
 
     <ul> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
      <li>4</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <p><a class="toggle-trigger-2" style="color: blue; ">Show </a><span>list 2</span><p> 
 
    <div class="toggle-wrap"> 
 
     <div class="style-single"> 
 
      <ul> 
 
       <li>1</li> 
 
       <li>2</li> 
 
       <li>3</li> 
 
       <li>4</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

で変更する必要はありません - どのように1つのページに複数のトグルを持っていますか？この作品、なぜ私は全く理解していない（しかし、それは非常によく動作します）

$(this).parent().nextAll('.toggle-wrap').first().slideToggle() 

手段

• 私はその親（p）に、クリックされた要素（.toggle-trigger）
• ゴーを取得
• 親の次のすべての兄弟を取得
• 最初に（.toggle-wrap）
• いslideToggle()

その上としては、あなたの問題はあなたが .toggle-triggerクラスを持つすべての要素のテキストを変更しているで、前回の回答で述べています。

私はそれを解決するために別のアプローチを使用しました。私は、各リストがトグルするために親のdivを作成しました。また、slideToggle()コールでコールバック関数を使用して、slideToggle()が終了すると.toggle-triggerのテキストが変更されるようにしました。ここで試すことができます：https://jsfiddle.net/57025Lco/