1

I'm attempting to make a button display random element when clicked using show/hide. It sets up so the element will be hidden first to stop duplicates, then shown. However it sometimes doesn't show.

The Fiddle will be clearer than my explanation: http://jsfiddle.net/qAfqN/.

Simplified code:

    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

查询$('div li:eq(2)')将返回li 3（索引从零开始），因为这是集合中的第三个元素。另一方面，$('div li:nth-child(3)')(这里的索引是基于一个的，这就是我写 3 而不是 2 的原因) 将返回li 5，因为这是它的组中唯一的第三个元素，在它的兄弟姐妹中。

你甚至可以为自己节省一些丑陋的字符串连接和重复的 DOM 查找，如果你使用.eq()而不是:eq()像这样的一些链接：

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

jsFiddle 演示

于 2013-05-09T23:34:49.333 回答
0

试试这个，但我不确定这是否是你想要的http://jsbin.com/ibasuv/1/edit

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();
};

我认为我为第二个 div 放置了一个 div 结束标签

于 2013-05-10T00:03:24.943 回答