複数のセレクタで非表示/表示すると、クリックしたときに個別に表示されます

Question

誰でも簡単にこのコードスニペットを手助けできますか？私は、さまざまなセレクタ（ループのような音ですが、どのように行うのか分かりません）で同じコードを繰り返す代わりに、コードの行を少なく書くことができるようにしたいと考えています。

複数のクラスをカンマで区切って表示すると、非表示のコンテンツが個別に表示されないという問題があります。

$(document).ready(function(){ 


//hide show toggle Latest 

$(".more-text-latest, .more-text-latest-2").hide(); 

$(".read-more-latest").click(function(event){ 
event.preventDefault(); 
$(".more-text-latest").slideToggle(600); 
     $(this).toggleClass(".more-text-latest"); 
    }); 

$(".read-more-latest-2").click(function(){ 
$(".more-text-latest-2").slideToggle(600); 
     $(this).toggleClass(".more-text-latest-2"); 
    }); 

Answer 1

あなただけがそれを達成するために、いくつかの方法は、例えば、同じことをループする場合：

$(document).ready(function() { 
    //hide show toggle Latest 
    [ 
     '.read-more-latest', 
     '.read-more-latest-2' 
    ].forEach(function (selector) { 
     var moreTextSelector = selector.replace('read-more', 'more-text'); 
     $(moreTextSelector).hide(); 

     $(selector).click(function (e) { 
      e.preventDefault(); 

      $(moreTextSelector).slideToggle(600); 
      $(this).toggleClass(moreTextSelector); 

      if ($(this).hasClass(moreTextSelector)) { 
       $(this).html('Return'); 
      } 
      else { 
       $(this).html('Read More'); 
      } 
     }); 
    }); 
});