使用同一按鈕多次觸發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;
    });
});