jQuery 显示和隐藏无法始终如一地工作

Posted 2023-05-09

【中文标题】jQuery 显示和隐藏无法始终如一地工作

【英文标题】：jQuery show and hide does not work consistently

【发布时间】：2013-05-04 13:54:17

【问题描述】：

我试图让按钮在使用显示/隐藏单击时显示随机元素。它设置为首先隐藏元素以停止重复，然后显示。但是它有时不显示。

小提琴会比我的解释更清楚：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();
    ); 
);

【问题讨论】：

为什么不打印“运行”结果，以便知道应该打印哪个元素，然后看看发生了什么。

你想打印每个列表的随机元素吗？

【参考方案1】：

使用: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，因为这是其组中唯一的第三个元素，在其兄弟姐妹中。

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

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

jsFiddle Demo

【讨论】：

嘿@bažmegakapa 谢谢你，但是我需要保持两个 ul 分开（在你的示例标记中）但连接。例如，如果任何#ui ul 的第二个 li 将始终一起显示。我的原始示例可以做到这一点，只是该属性没有 100% 应用。谢谢

@atomictom 那么length 有问题。根据解释，我想你可以解决这个问题。如果没有，请询​​问。

啊，是的！我了解，由于额外的 ul，变量长度加倍，因此它正在寻找，例如，只有 5 个值时的 10 个值。我编辑了这个小提琴，它是我需要的欺骗版本，并且可以完美运行，@ 987654322@。我想知道如何正确解决它为时已晚，但如果我以后无法解决，我可能会向你寻求帮助。谢谢！

【参考方案2】：

试试这个，但我不确定这是不是你想要的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 结束标记

【讨论】：

啊，是的，它肯定会显示 100% 的时间，这要好得多，但它只显示两个 ul 中的一个。 I had a go butchering your work 并让它显示两个 ul 但是它会导致我之前遇到的同样问题，它会间歇性地显示。总之谢谢