简化包含多个条目的 javascript 代码答案

【问题标题】：Simplify a javascript code containing multiple entries简化包含多个条目的 javascript 代码
【发布时间】：2017-01-18 11:22:02
【问题描述】：

谁能帮我简化这段代码？

现在，每当我上传新条目时，我都必须添加到此代码中。我希望它能够工作，以便只有一个脚本可以识别元素 ID（“#rolly”或“#lagrimas”）并根据其状态在条目上运行代码（.toggle('show')） .

另外，如果用 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 条目的示例（对应于上面的第一个 javascript）：

[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>

【问题讨论】：

标签： javascript php jquery element

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：