Question

现在我的代码允许我单击一个按钮并随机显示一个段落。但是，如果我再次单击该按钮几次，它将显示两个项目。我如何对此进行编码，以便当我再次单击该按钮时它将摆脱之前显示的<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>

Answer 1

你淡出所有的P＆，并且在

中完成淡化

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

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

jQuery删除以前随机选择并显示的段落，并重新显示随机选择的段落

1 个答案: