jQueryのtoggleClassは、個別のサムネイルクリックアクション

に私の目標トグルしません。jQueryのtoggleClassは、個別のサムネイルクリックアクション

をサムネイルのセットを持っています。
toggleClassのhiddenElementにサムネイルをクリックすると、表示されているdiv内に大きな画像が表示されます。
DOM内の任意の場所をクリックすると、ユーザーは（次のdivのサムネイル＃2がクリックされた場合）に切り替えることができます。

私の問題：DOMまたはをクリックしたとき画像は、私はそれだけで元の画像をアップし続けるなど第二または第三のサムネイルをクリックして、下の次のクリックされたイメージをロードするときを除いて、うまく切り替えます最初の画像は両方の画像を残します。

最初のサムネイルをクリックすると画像が読み込まれますが、2番目のサムネイルをクリックすると最初の画像が消えず、2番目の画像も読み込まれます。私のCSSクラスのhiddenElementを切り替えるはずです。

私のjQueryの：

$("#port1_thumb, #port1_large").on("click", function() { 
    $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); 
}); 

$('document').click(function() { 
    $('#port1_large').removeClass('hiddenElement'); 
}); 

$("#port2_thumb, #port2_large").on("click", function() { 
    $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); 
}); 

$('document').click(function() { 
    $('#port2_large').removeClass('hiddenElement'); 
});

マイDOM：

<div class="wrap"> 

    <!-- Hidden elements --> 

     <div id="port1_large" class="hiddenElement"> 
      <img src="assets/portfolio-images/portfolio_content/project1.jpg"> 
     </div> 

     <div id="port2_large" class="hiddenElement"> 
      <img src="assets/portfolio-images/portfolio_content/project2.jpg"> 
     </div> 

    <!-- /Hidden elements --> 

    <!-- Thumbnails --> 

      <div id="portfolio"> 
       <ul class="portfolio-grid"> 
        <li> 
         <a id="port1_thumb" target="portfolio"> 
          <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_1.png" alt="img01"/> 
          <h3>Project 1</h3> 
         </a> 
        </li> 
        <li> 
         <a id="port2_thumb" 
          target="portfolio"> 
          <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_2.png" alt="img01"/> 
          <h3>Project 2</h3> 
         </a> 
        </li> 
       </ul> 
      </div> 
</div>

CSSクラス：

.hiddenElement { 
    display: none; 
}

注：：

DRYが頻繁に行われていますが、このtoggleClassの問題が起こらないようにコードを単純化するにはどうすればよいですか？

私はそれが私のjQueryで同じクラスのアクションを何度も何度も繰り返していると思いますが、私はそれをどのようにリファクタリングするのか分かりません。

私は、起こっていることのJSFiddleを見つけましたが、それは私が遭遇している正確な問題です。特にサムネイルの代わりにサムネイルを切り替えることはできません。

複数の要素が動作していないため、このトグルクラスのトピックについてのチュートリアルや質問が掲載されている場合は、リンクしてください。

お時間をいただきありがとうございます。

出典

2017-01-28 railsRabbit

を私はあなたが＃のport2_thumbまたは＃port2_large、＃のport1_thumbと＃のport1_largeドンをクリックしたときからだと思いますそれについて知りません。 toggleClass（ "hiddenElement"）; $（ "＃port2_thumb、＃port2_large"）をクリックしてください。 port1_thumb、＃port1_large "）。toggleClass（ "hiddenElement"）; }）; ' – mickdev

私はそれに似たものを試してみましたが、残念ながら一度に両方の画像を読み込みます。 – railsRabbit

また、次のようなコードを単純化することもできます： '$（" div [id^= 'port'] "）.on（" click "、function（）{$（this）.toggleClass（" hiddenElement " ）;}） ' – mickdev

私は本当にあなたがこのようないくつかの事必要意味を理解していれば：

<head> 
 
    <title></title> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
    <style> 
 
     .hiddenElement { 
 
      display: none; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="wrap"> 
 

 
     <div id="port1_large" class="hiddenElement large"> 
 
     <img src="assets/portfolio-images/portfolio_content/project1.jpg"> 
 
    </div> 
 

 
    <div id="port2_large" class="hiddenElement large"> 
 
     <img src="assets/portfolio-images/portfolio_content/project2.jpg"> 
 
    </div> 
 

 
    <div id="portfolio"> 
 
     <ul class="portfolio-grid"> 
 
      <li> 
 
       <a id="port1_thumb" class="thumb" target="portfolio"> 
 
        <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_1.png" alt="img01" /> 
 
        <h3>Project 1</h3> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a id="port2_thumb" class="thumb" 
 
        target="portfolio"> 
 
        <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_2.png" alt="img01" /> 
 
        <h3>Project 2</h3> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <script> 
 
     
 
     $("#port1_thumb, #port1_large").on("click", function() 
 
     { 
 
      $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); 
 
     }); 
 

 
     $('document').click(function() 
 
     { 
 
      $('#port1_large').removeClass('hiddenElement'); 
 
     }); 
 

 
     $("#port2_thumb, #port2_large").on("click", function() 
 
     { 
 
      $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); 
 
     }); 
 

 
     $("#port1_thumb").click(function() 
 
     { 
 
      if (!$('#port2_large').hasClass("hiddenElement")) 
 
       $('#port2_large').addClass("hiddenElement"); 
 
      $("#port2_thumb").removeClass("hiddenElement"); 
 
     }); 
 

 
     $("#port2_thumb").click(function() 
 
     { 
 
      if (!$('#port1_large').hasClass("hiddenElement")) 
 
       $('#port1_large').addClass("hiddenElement"); 
 
      $("#port1_thumb").removeClass("hiddenElement"); 
 
     }); 
 

 
     $('document').click(function() 
 
     { 
 
      $('#port2_large').removeClass('hiddenElement'); 
 
     }); 
 
    </script> 
 
</body>

出典

2017-01-28 21:49:23

はい！それは私が達成しようとしていることのほとんどです、私はいくつかのサムネイルより多くを持っているので、私は私のDOM（port2_thumbはport_thumb2でなければなりません）でうんざりしたものを見ました。私はあなたが持っているもののリファクタリングのようなものになっています：$（ "div [id^= 'port_thumb']"）（function（） { if（！$ ['div [id^=' port_large ]]）。）hasClass（ "hiddenElement"）） $（ 'div [id^=' port_large] '）addClass（ "hiddenElement"）; $（' div [id^= 'port_thumb]'）。removeClass（ "hiddenElement"）; }）; ' 私は 'if'ステートメントを実行しなければならないと思います。 – railsRabbit

複数のサムネイルと複数の画像追加クラスがある場合各リンクに.thumbクラスを追加すると、各大きな画像にサムネイルとクラス.largeが含まれます。（this）; $ this.attr（ 'id'）; $（ '。thumb'）; js：$（ '。thumb'））（）{}}}}};} {}}}}};} {}}}}}};} ; $ this.addClass（ "hiddenElement"）; $（ '＃' + thisId.replace（ "thumb"、 "large"））removeClass（ "hiddenElement"）; }）; –

私はhtmlを編集して変更を確認します。 –

jQueryのtoggleClassは、個別のサムネイルクリックアクション

答えて

関連する問題