javascript - 简化包含多个条目的 JavaScript 代码

Question

谁能帮我简化这段代码吗？

现在，每当我上传新条目时，我都必须添加此代码。我希望它能够工作，以便只有一个脚本可以识别元素 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>

Answer 1

您可以使用公共(public)类和 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>