脚本相互冲突——JavaScript

Scripts collide with each other - JavaScript

本文关键字：JavaScript 冲突 脚本      更新时间：2023-09-26

我有一个页面，基本上是一个div列表;它们的结构如何并不重要，只要默认情况下它们都是可见的就足够了。多亏了java脚本，页面上有一些按钮可以让您对它们进行排序。例如，如果单击"完成"按钮，页面将只显示包含代码

的div。
<div class="ended">complete</div>

而如果你按下"show all"按钮，它会返回显示所有内容。(结构类似于

<div class="entry">
      <p>something</p>
      <div class="ended">complete</div> 
et cetera </div>

我最近决定添加一个新按钮，它从它们中随机选择一个div。这一切都工作得很好，除了当你试图在随机选择一个之后再次显示它们时，它不起作用。

我不太熟悉JavaScript和JQuery(我从这里找到的脚本随机改编的脚本)，所以我不明白哪里出错了。

这是排序脚本(其中一个)的代码:

$('#completed').click(function() {
    featureList.filter(function(item) {
        if (item.values().ended == "complete") {
            return true;
        } else {
            return false;
        }
    });
    return false;
});

下面是显示所有按钮的代码:

$('#filter-none').click(function() {
    featureList.filter();
    return false;
});

最后，这是随机按钮的代码:

$(document).ready(function () {
  $('#random').click(function () {
    var E = document.getElementsByClassName("entry");
    var m = E.length;
    var n = parseInt(Math.random() * m);
    for (var i = m - 1; i >= 0; i--) {
      var e = E[i];
      e.style.display = 'none';
    }
    E[n].style.display = '';
  });
});

如果不知道。filter-function内部发生了什么，很难给出答案，但根据您提供的内容，这可以工作:

$('#random').click(function () {
    var entries = document.getElementsByClassName("entry");
    var numEntries = entries.length;
    var random = Math.floor(Math.random() * numEntries);
    var counter = numEntries;
    featureList.filter(function(item) {
        counter--;
        if (counter === random) {
            return true;
        } else {
            return false;
        }
    });
    return false;
}

我假设在。filter中返回false的元素以某种方式隐藏。

由于'Show all'和'Show only completed'是工作的，使用'Show only completed'的方式隐藏错误的元素在'Show random'应该工作

相关文章：