Javascript/JQuery 疑难解答

Question

在我解释我的问题之前，我想向你展示我的 Javascript 的过程：

当您在输入栏中输入文本并按提交时，脚本会创建一个“div”并将该文本放置在新创建的 div 中，并将其放入永久 div（已经存在的 div，而不是从 javascript 创建的)。

例如：

$(".list").append('<div class="woof">' + '<div class="box">' + toAdd + '</div>' + '</div>');

新创建的 .woof 和 .box div 被放置到已经存在的 .list div 中。 toAdd 是来自输入值的文本。

同时，Javascript 将 toAdd 字符串输入到包含数组的变量中（例如：Var theArray = []）。输入多个文本后，'theArray' 变量数组将被字符串填充（例如：var theArray = ["Meow", "Cheeseburger", "Yes"]），同时 - 如前所述 - 将这些字符串添加到 HTML（例如：因此，这意味着 HTML <div class='list'> 也应该有“喵”、“芝士汉堡”等）。然后有一个脚本创建一个随机数，该随机数从数组中随机选择一个字符串（例如：生成的随机数从数组中选择“是”）。

我遇到的问题是创建一个 Javascript/Jquery，它从随机生成的数字中获取结果并在 HTML 中找到它。我创建的脚本允许我成功地从数组中选择一个字符串，但我试图让该选择在 HTML 列表中突出显示。

例如，随机生成的数字从 Array 中选择“Yes”字符串。然后我想创建一个脚本，在 HTML div 中找到“是”，并突出显示它（使用 CSS 等），以便查看者可以看到选择了该字符串。

所以，我遇到的问题是这句话上面的问题。我找不到将生成的随机数与 HTML 中的字符串连接起来的方法。 希望这可以解释它。

Answer 1

您可以使用 jQuery .eq 方法将元素缩小到特定索引的元素。基本上，您的索引是按照元素在 DOM 中的显示顺序排列的。

$(".list").find(".woof").eq(randNum).addClass("background-color");

或者其他的

textToFind = myArray[randNum];

$(".list").find("div:contains('" + textToFind + "')").addClass("background-color");

或者取决于你想要什么。

$(".list").find("div:contains('" + textToFind + "')").parent().addClass("background-color");

编辑
进行了一些谷歌搜索（评论部分中的see here）。 如果您不希望奶酪也与芝士汉堡相匹配，您可能需要创建自己的 jQuery .filter() 函数来缩小 DOM 元素的选择范围。我已经在你的情况下为你写了，所以不用担心。它也是不区分大小写的，所以如果您不想这样做，只需取出.toLowerCase()。由于.trim()，它也不关心空白，如果您总是在没有空白的情况下声明它，您可以将其取消。

$('.list').find(".box").filter(function(){ 
  return $(this).text().trim().toLowerCase() === 'cheese';
}).addClass("background-blue");

或者在这种情况下，您可以通过 woof 类找到它，这会给它背景色而不是框。

$('.list').find(".woof").filter(function(){ 
  return $(this).text().trim().toLowerCase() === 'cheese';
}).addClass("background-blue");

这是一个小提琴http://jsfiddle.net/kx7pd/

顺便说一句，在使用上述示例时，请使用您的 textToFind 变量，而不是字符串 'cheese'。 （双关语。）