jQuery删除之前随机选择并显示的段落并重新显示随机选择的段落答案

【问题标题】：jQuery remove a previously randomly selected and displayed paragraph and re-display a randomly selected paragraphjQuery删除之前随机选择并显示的段落并重新显示随机选择的段落
【发布时间】：2014-07-09 02:18:03
【问题描述】：

现在我的代码允许我单击一个按钮并随机显示一个段落。但是，如果我再次单击该按钮几次，它将显示这两个项目。我将如何编码，以便当我第二次单击该按钮时，它将摆脱先前显示的<p> 并显示一个新的随机选择的<p>？我试图使用$( "#foo").unbind( "click" );，但这不起作用。

我的 jQuery：

$( "#toggleweight" ).click(function() {
  var set =Math.floor((Math.random()* $('p').length )+1);
  $.ajax({success:function(result){
    $( "#foo").unbind( "click" );
    $( "p:nth-child(" + set+ ")" ).fadeIn( 3200 );
    }});
});

我的 HTML：

    <div id="button">
      <a class="btn" href="#" id="toggleweight">Cool button. </a>
    </div>
    <div id = "button2">
      <% array = ["ASDF", "FDSA"] %>
      <% array.each do |display| %>
      <p class="btn" style="display: none"><%= display %></p>
     <% end %>
    </div>

【问题讨论】：

标签： javascript jquery html css random

【解决方案1】：

你淡出所有的 P，并在完成时将它淡入

$.ajax({success:function(result){
        $( "#foo").unbind( "click" );
        $("p").fadeOut(400,function(){
            // onComplete code goes here
            $( "p:nth-child(" + set+ ")" ).fadeIn( 3200 );
        });
    }
});

您也可以使用幻灯片功能，或者通过绝对位置淡化它们，就像简单的幻灯片淡出一样

【讨论】：

谢谢@Martijn - onComplete 代码是什么意思？
知道了——效果很好！ $( "#toggleweight" ).click(function() { var set =Math.floor((Math.random()* $('p').length )+1); $.ajax({success:function(result){ $( "#foo").unbind( "click" ); $("p").fadeOut(400,function(){ // onComplete code goes here $( "p:nth-child(" + set+ ")" ).fadeIn( 3200 ); }); } }); })