Question

有人可以帮我简化这段代码吗？

现在，每当我上传新条目时，我都必须添加此代码。我希望它工作，以便只有一个脚本可以识别元素ID（＆＃34;＃rolly＆＃34;或＆＃34; #lagrimas＆＃34;）并运行代码（.toggle（＆＃） 39;根据其状态显示＆＃39;））。

另外请告诉我，如果用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

您可以使用公共类和DOM遍历来使代码更加干燥。

另请注意，live()在 long 之前已被弃用。它甚至已从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事件。

示例如下。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: