Question

我正在尝试使用函数来缩小此代码。我有多个ID。

// opening section
$("#id").click(function() {
  if ($("#id2").is(":hidden")) {
    $("#id2").slideDown("fast");
  }); 

  $("#id3").click(function() {
    if ($("#id4").is(":hidden")) {
      $("#id4").slideDown("fast");
    }); 

    $("#id5").click(function() {
      if ($("#id6").is(":hidden")) {
        $("#id6").slideDown("fast");
      });

Answer 1

您可以为#id元素指定一个属性，以表示相应的#id2元素，依此类推：

<div id="id" class="click-div-button" data-clickdiv="id2">

然后你的jquery就是

$(".click-div-button").click(function() {
  var data=$(this).data('clickdiv')
  if ($('#'+ data).is(":hidden")) {
    $('#'+ data).slideDown("fast");
  });

这将获取正确的div，因为他们的类而触发，并根据属性将正确的div放进去。

Answer 2

使用jquery

＆＃13;

// opening section
  
function slideDown(e) {
  var id = $(e.target).attr('id').replace('id','');
      id = id==''?2:parseInt(id)+1; 
  console.log('will slidown this:',id);
  if ( $( "#id"+id ).is( ":hidden" ) ) {
    $( "#id"+id ).slideDown( "fast" );
  }  
}
$( "#id" ).click(slideDown);
$( "#id2" ).click(slideDown);
$( "#id3" ).click(slideDown);
$( "#id4" ).click(slideDown);
$( "#id5" ).click(slideDown);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">1</div>
<div id="id2">2</div>
<div id="id3">3</div>
<div id="id4">4</div>
<div id="id5">5</div>
<div id="id6">6</div>

＆＃13;

Answer 3

您可以创建一个{{1}}循环来生成每个事件。

由于格式不一致（id - ＆gt; id2），我正在创建一个映射到下一个id的对象。

{{1}}

相同的事件，相同的效果，多个ID

3 个答案: