jQuery: slideDown() 显示错误的 div

Question

我有 4 个不同的 div，我想为 4 个不同的按钮显示。因此，当用户单击特定链接时，将显示特定的 div。 这是我的 HTML:

链接:

    <div class="col-md-3 text-center">
    <a id="clickme1">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme2">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme3">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme4">I'm Interested</a>
    </div>

我的 Div:

    <div class="col-md-3 text-center" id="ad1">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad2">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad3">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad4">
    <p>Show Table Here</p>
    </div>

我的 jQuery:

$("#clickme1").click(function () {
    if ($("#ad1").is(":hidden")) {
        $("#ad1").slideDown("slow");
    } else {
        $("#ad1").hide();
    }
});

// Ad 2
$("#clickme2").click(function () {
    if ($("#ad2").is(":hidden")) {
        $("#ad2").slideDown("slow");
    } else {
        $("#ad2").hide();
    }
});

// Ad 3
$("#clickme3").click(function () {
    if ($("#ad3").is(":hidden")) {
        $("#ad3").slideDown("slow");
    } else {
        $("#ad3").hide();
    }
});

//Ad 4
$("#clickme4").click(function () {
    if ($("#ad4").is(":hidden")) {
        $("#ad4").slideDown("slow");
    } else {
        $("#ad4").hide();
    }
});

在我的 CSS 中，所有 4 个 div 都具有属性 display:none。

问题

当我点击我的链接时，1 个 1 个，它们都显示正常。但是如果我点击任何其他链接开始，它总是显示第一个 div (#ad1)。 当我想隐藏它们时也是如此，如果我再次单击它们中的任何一个，它会隐藏另一个 div。我必须缺少一个明显的步骤!请帮助:(

Answer 1

与其创建所有 id，不如使用一个类。然后给链接添加一个data-slid-id，就是应该向下或向上滑动的id。

添加额外的链接和表格时，您不需要额外的功能。

$(function() {
  $('#ad1,#ad2,#ad3,#ad4').hide();
  $('.clickme').on('click',function() {
      $('#'+$(this).data('slide-id')).slideToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad1">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad2">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad3">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad4">I'm Interested</a>
</div>



<div class="col-md-3 text-center" id="ad1">
    <p>Show Table Here 1</p>
</div>

<div class="col-md-3 text-center" id="ad2">
    <p>Show Table Here 2</p>
</div>

<div class="col-md-3 text-center" id="ad3">
    <p>Show Table Here 3</p>
</div>

<div class="col-md-3 text-center" id="ad4">
    <p>Show Table Here 4</p>
</div>