使用同一按钮多次触发JQUERY功能

Question

我在html代码中有5个分区，在第一个分区之后，放置了一个“显示更多”按钮。 我想触发一个jquery命令，该命令在单击按钮“显示更多”时显示第二部分，在再次单击按钮时显示第三部分，依此类推。

问题是我只能显示第二部分，而不能第二次触发jquery脚本以显示第三部分。

下面是我的Jquery和html。

 $(document).ready(function(){ for(i=2;i<=5;i++) { $("#"+i).hide(); } i=2; /* degrade the value of i */ $("button").on("click",function(){ //alert(i); $("#button").remove(); $("#"+i).show(); var button="<button id='button' class='btn btn-primary'>show more</button>"; $("#"+i).after(button); i=i+1; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div><!-- .row --> </div><!-- .container --> 

Answer 1

您可以这样做。 诀窍是：

$(":hidden").first().show()

片段

 $(function () { $("p:not(:first)").hide(); $("a").click(function (e) { e.preventDefault(); $("p:hidden").first().show(); }); }); 

 * {margin: 0; padding: 0; list-style: none; line-height: 1;} p {display: inline-block; padding: 5px; border: 1px solid #ccc;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <a href="#">Show</a> 

另外，您可以再添加一项检查以查找是否还有其他隐藏的<p> ，然后您也可以删除链接：

 $(function () { $("p:not(:first)").hide(); $("a").click(function (e) { e.preventDefault(); $("p:hidden").first().show(); if (!$("p:hidden").length) $(this).hide(); }); }); 

 * {margin: 0; padding: 0; list-style: none; line-height: 1;} p {display: inline-block; padding: 5px; border: 1px solid #ccc;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <a href="#">Show</a> 

Answer 2

好吧，我猜这是一个非常简短的解决方案： https : //jsfiddle.net/hallleron/h6huonub/1/

使用detach（）函数处理按钮。 这样，您就不会丢失按钮的事件委托，并且不会占用大量资源。

关键部分是这一行：

var el = $('#button').detach();

 $(document).ready(function(){ for(i=2;i<=5;i++) { $("#"+i).hide(); } i=2; $("button").on("click",function(){ var el = $('#button').detach(); $("#"+i).show(); $("#"+i).after(el); i=i+1; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div><!-- .row --> </div><!-- .container --> 

编辑：添加了工作代码段。

Answer 3

这是因为初始化函数时，第二个按钮不在DOM中。

而是使用此：

    $('body').on('click', 'button', function(){
       // Your code
    });

http://api.jquery.com/on/

 $(document).ready(function(){ for(i=2;i<=5;i++) { $("#"+i).hide(); } i=2; /* degrade the value of i */ $("body").on("click", "button" ,function(){ //alert(i); $("#button").remove(); $("#"+i).show(); var button="<button id='button' class='btn btn-primary'>show more</button>"; $("#"+i).after(button); i=i+1; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div><!-- .row --> </div><!-- .container --> 

Answer 4

为什么要销毁按钮，然后尝试立即重新创建按钮？ 只需使用相同的按钮。 否则，您将需要委派动态添加的元素。

$("#button").click( () => $(`#${++i}`).show())

或在ES5中：

$("#button").click( function(){ $("#" + (++i) }).show())

您说要销毁按钮并重新创建它，所以它总是在最后显示的元素之后，好吧，将按钮直接放在所有隐藏的元素之后，并留在这里...

Answer 5

当您删除按钮并插入一个新按钮时，它没有附加单击处理程序。 相反，您可以做的是移动现有按钮，该按钮将保留点击处理程序。

 $(document).ready(function() { var i, $button = $('#button'); for (i = 2; i <= 5; i++) { $("#" + i).hide(); } i = 2; /* degrade the value of i */ $("button").on("click", function() { var $i = $("#" + i); $button.insertAfter($i); $i.show(); i = i + 1; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div> <!-- .row --> </div> <!-- .container --> 

确实， insertAfter的文档中提到

如果以这种方式选择的元素插入到DOM中其他位置的单个位置，则将在目标（未克隆）之后移动该元素，并返回由插入的元素组成的新集合：

（强调我的。）

Answer 6

我想你在找

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12" id="ID_1" style="border:1px solid red; height:200px; width:300px;"></div>
            <button id='button' class='btn btn-primary'>show more</button>


      </div><!-- .row -->
    </div><!-- .container -->

<!-- end snippet -->

<script>

    var id=1;
        $(document).ready(function(){

                $("body").on("click", "button" ,function(){
                id++;

                var div='<div class="col-md-4 col-sm-6 col-xs-12" id="ID_'+id+'" style="border:1px solid red; height:200px; width:300px;"></div>';
                    var button="<button id='button' class='btn btn-primary'>show more</button>";
                $("#button").remove();
                $(".row").append(div);
                    $(".row").append(button);
                });
            });

</script>

Answer 7

尝试这样做：

$(document).ready(function() {
    for (var i = 2; i <= 5; i++) {
        $("#" + i).hide();
    }
    var i = 2; /* degrade the value of i */

    $("button").on("click", function() {
        $("#" + i).show();
        i = i + 1;
    });
});