是否可以引用变量上的单击事件？

Question

任务是创建一个单击事件，该事件将导致标题向上滑动，我试图用一个单击事件引用来完成此任务，但是这将只在第一个标头上工作。是否有一个应该使用多个单击事件来完成这一任务？

<h1 id="h1">Heading-1</h1>
<h2 id="h2">Heading-2</h2>
<h3 id="h3">Heading-3</h3>

<div id = "result"></div>

<script src="jquery.js"></script>


<script>

    var i= 1;
    $("h" + i).bind('click', function () {
        var thisID = '#h' + i;
        $(thisID).slideUp("slow");
        i++; 
    });

Answer 1

尝试使用类而不是ID。

<h1 id="h1" class="sliderHeading">Heading-1</h1>
<h2 id="h2" class="sliderHeading">Heading-2</h2>
<h3 id="h3" class="sliderHeading">Heading-3</h3>

如果您只需要单击以滑动向上的标题：

   $(".sliderHeading").bind('click', function () {
        var thisID = $(this).attr('id');
        $(thisID).slideUp("slow");
    });

如果您需要在一次单击中滑动所有标头：

 $(".sliderHeading").bind('click', function () {
        $(".sliderHeading").slideUp("slow");
    });

Answer 2

您可以尝试向所有类添加一个类，并在脚本中使用该类。

Answer 3

如果知道头(id)的数目，尝试在循环中执行。

for (var i=1; i<=3; i++) {

$("h" + i).bind('click', function () {
    var thisID = '#h' + i;
    $(thisID).slideUp("slow");

});

}