Question

我想在点击按钮时显示每个“p”元素。但它并没有起作用请求帮助。

<script>
$(document).ready(function(){
$("p").hide();
    $("button").click(function(){
            $('p').each(function() {
                //alert($(this).text());
               var abc = $(this).text();
              abc.next().show();
              });
    });     
});
</script>


<button>Toggle</button>
<p>Hello</p>
<p>Good morning</p>
<p>Good after noon</p>
<p>Good evening</p>
<p>Good night</p>

<div></div>

Answer 1

$("p").hide();

$("button").click(function(){
    $('p').each(function () {
        if (!$(this).is(":visible")) {
            $(this).show();
            return false;
        }
    });
});

Answer 2

尝试使用以下代码：

    $('p').each(function() {  
          $(this).show();
     });

或者只是

 $('p').show();

希望这有助于!!

Answer 3

我可能进一步扩展它：我假设您的示例是简化的简化示例，以便于对话。如果您的应用程序要进行大量的DOM操作（即某些元素可能被破坏和重建），或者如果遇到绑定的“click”事件的时间问题，我会使用.delegate（）来绑定点击而不是：

$(document).ready(function(){
  $("p").hide(); // there are other ways to hide depending on your needs or to avoid FOUC
  $("body").delegate("button", "click", function() {
    $("p").show();
  }
});

我选择“body”作为听众只是因为我不知道你的页面内容。最好的监听器是最近的父级，不会被破坏，通常是某种包装div。如果可以的话，将“身体”换成更具体的选择器。

区别在于：

.click（）：“抓住这个特定的元素，让它听取自己的点击。” .delegate（）：“抓住一个父级对象，让它听取与指定选择器匹配的任何元素的点击。”

.delegate（）可能出于某些目的而“过度杀伤”，但我会尽可能地使用它，因为它更具有前瞻性。

Answer 4

以下是使用您拥有的HTML

一次显示的javascript

var hiddenP = $("p:hidden");
var howMany = hiddenP.length;
var pIndex = 0;
$("button").click(function(evt){
    if (pIndex == howMany)
        return false;
    $(hiddenP[pIndex]).fadeIn(1000);
    pIndex +=1;  
});

查看jsfiddle上的示例以查看HTML和CSS http://jsfiddle.net/Cvm68/

使用jquery元素的foreach

4 个答案: