複数のエントリを含むjavascriptコードを簡略化

Question

誰でもこのコードを簡略化するのに役立つことができますか？

今、新しいエントリをアップロードするたびにこのコードに追加する必要があります。 要素ID（ "#rolly"または "#lagrimas"）を特定し、そのコードに応じてエントリにコード（.toggle（ 'show'））を実行するスクリプトが1つだけ存在するように、状態。

また、これがPHPでうまくいくかどうか教えてください。私はJavaScriptを好むだろうが、それが可能かどう...私は新しいプロファイルのアップロードがあるたびに追加

javascriptのはこれです：

jQuery(document).ready(function(){ 

jQuery("#rolly").toggle('show'); 
jQuery("#lagrimas").live('click', function(lagrimas) {   
    jQuery("#rolly").toggle('show'); 
}); 

jQuery("#rodrigo").toggle('show'); 
jQuery("#ferber").live('click', function(ferber) {   
    jQuery("#rodrigo").toggle('show'); 
}); 

jQuery("#michael").toggle('show'); 
jQuery("#cruz").live('click', function(cruz) {   
    jQuery("#michael").toggle('show'); 
}); 

jQuery("#rodolfo").toggle('show'); 
jQuery("#paladin").live('click', function(paladin) {   
    jQuery("#rodolfo").toggle('show'); 
}); 

jQuery("#rommel").toggle('show'); 
jQuery("#abadiano").live('click', function(abadiano) {   
    jQuery("#rommel").toggle('show'); 
}); 
}); 

下記ている間は（HTMLエントリの1つの例であります

[btn_default_disabled id="lagrimas" class="btn" value="show/hide" fomable_id=3 default='Select' disabled='Reserved'] 
<br> 
<div id="rolly">[formidable id=3]</div> 

Answer 1

共通のクラスとDOMトラバーサルを使用すると、コードをよりDRYにすることができます。

また、live()は、と長くは、時間前に非難されました。 jQuery v3からも削除されています。私はあなたがそれを使用しないことを強くお勧めします。また、あなたのバージョンのjQueryを少なくとも1.12にアップグレードすることを検討してください。

$(".btn").on('click', function() {   
 
    $(this).next('.target').toggle(); 
 
});

.target { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="lagrimas" class="btn">Toggle</button> 
 
<div id="rolly" class="target">rolly</div> 
 

 
<button id="ferber" class="btn">Toggle</button> 
 
<div id="rodrigo" class="target">rodrigo</div>

Answer 2

それはあなたがアップロードして質問に新しいエントリをどのような意味ですか少し不明です。私は推測に基づいてあなたの質問に答えます。

divとボタンのセットが関連付けられているようです。 コードを単純化するには、クラスを使用してこの関係を抽象化し、idを使用する代わりにクラスセレクタを使用してjqueryイベントをバインドする必要があります。

以下のサンプル。

$(function() { 
 
    $('.display').toggle('show'); 
 
    $('.container').on('click', '.btn', function() { 
 
    $(this).siblings('.display').toggle('show'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button class="btn" id="lagrimas">Click lagrimas</button> 
 
    <div class="display" id="rolly"> 
 
     I am Rolly. 
 
     </div> 
 
    </div> 
 

 
<div class="container"> 
 
    <button class="btn" id="ferber">Click ferber</button> 
 
    <div class="display" id="rodrigo"> 
 
     I am Rodrigo. 
 
     </div> 
 
    </div>