在解释我的问题之前,我想向您展示我的 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'>
也应该有“喵”、“芝士汉堡”等)。然后有一个脚本创建一个随机数,该随机数从数组中随机选择一个字符串(例如:生成的随机数从数组中选择"is")。
我遇到的问题是创建一个 Javascript/Jquery,它从随机生成的数字中获取结果并在 HTML 中找到它。我创建的脚本允许我成功地从数组中选择一个字符串,但我试图让该选择在 HTML 列表中突出显示。
例如,随机生成的数字从数组中选择“Yes”字符串。然后我想创建一个脚本,在 HTML div 中找到"is",并突出显示它(使用 CSS 或其他),以便查看者可以看到该字符串已被选中。
所以,我遇到的问题是这句话上面的那个。我找不到将生成的随机数与 HTML 中的字符串联系起来的方法。 希望这可以解释。
最佳答案
您可以使用 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");
这是一把 fiddle http://jsfiddle.net/kx7pd/
顺便说一句,在使用上述示例时使用您的 textToFind 变量而不是字符串 'cheese'
。 (双关语。)
关于Javascript/JQuery 故障排除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23024996/