使用相同的按钮

时间：2017-06-09 09:28:35

标签： javascript jquery

我在html代码中有5个分区，在第一个分区后有一个按钮＆＃34;显示更多＆＃34;已被放置。我想发一个jquery命令，它显示第二个部门点击按钮＆＃34;显示更多＆＃34;曾经和第三师再次点击按钮等等。

问题是我只能显示第二个分区并且第二次无法触发jquery脚本来显示第三个分区。

下面是我的Jquery和html。

＆＃13;
＆＃13; 
$(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;
		});
	});
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：6)

你可以这样做。诀窍是：

$(":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>

答案 1 :(得分：3)

嗯，我想这是一个非常简短的解决方案：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 -->

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

答案 2 :(得分：2)

这是因为初始化函数时第二个按钮不在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 -->

答案 3 :(得分：2)

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

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

或者在ES5中：

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

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

答案 4 :(得分：0)

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

$(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中其他位置的单个位置，则在目标（未克隆）之后将移动，并返回由inserted元素组成的新集合：

（强调我的。）

答案 5 :(得分：0)

我认为您正在寻找 

<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>

答案 6 :(得分：-2)

尝试这样做：

$(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;
    });
});
相关问题
最新问题