1

表示/非表示を使用してクリックすると、ボタンにランダムな要素が表示されるようにしようとしています。重複を防ぐために要素が最初に非表示になり、次に表示されるように設定します。ただし、表示されない場合もあります。

Fiddle は、私の説明よりも明確になります: http://jsfiddle.net/qAfqN/。

簡略化されたコード:

    this.uiSelect = function(){
    var length = $("#ui li").length;
    var ran = Math.floor(Math.random()*length);
        $('#ui li').hide();
    $("#ui li:nth-child(" + ran + ")").show();
};

    $(document).ready(function(){   
    $('#mangle').click(function(){
        uiSelect();
    }); 
});
4

2 に答える 2

2

:eq()の代わりに使用し:nth-child()ます。それらはまったく異なる意味を持っています。前者は jQuery コレクション内の要素の位置を参照し、後者は DOM 兄弟間の位置を参照します。これらはあなたの状況では同じではありません。

次のマークアップを検討してください。

 div
    > ul
        > li 1
        > li 2
    > ul
        > li 3
        > li 4
        > li 5

コレクションの 3 番目の要素であるため、クエリ$('div li:eq(2)')は返されますli 3(インデックスは 0 から始まります)。一方、$('div li:nth-child(3)')(インデックスはここでは 1 から始まるため、2 ではなく 3 と書きました) は を返しli 5ます。これは、兄弟の中で、そのグループの 3 番目の要素だけだからです。

.eq()の代わりに次の:eq()ようなチェーンを使用すると、見苦しい文字列の連結や DOM ルックアップの重複を回避することもできます。

$("#ui li").hide().eq(ran).show();

jsFiddle デモ

于 2013-05-09T23:34:49.333 に答える
0

これを試してみてください。ただし、これがあなたが望むものかどうかはわかりません

var pickRandom = function(selector){
  var lis = $(selector).find('li');
  lis.hide();

  var size = lis.size();

  var random = Math.floor(Math.random()*size);
  $(selector).find('li').eq(random).show();
};

2 番目の div には div の終了タグを付けました。

于 2013-05-10T00:03:24.943 に答える