jQuery - 寻找一个特定的词答案

【问题标题】：jQuery - Look for a specific wordjQuery - 寻找一个特定的词
【发布时间】：2014-08-13 06:31:20
【问题描述】：

我正在尝试根据元框（下拉菜单）的值在 wp 帖子上显示不同的内容。因此，如果我在下拉菜单中有“视频”、“代码”和“图像”作为选项可用，我会制作一个隐藏的 div，根据所选内容显示“视频”、“代码”或“图像”。然后我需要 jQuery（或 Javascript）来查看隐藏的 div 以获取以太字，并显示/隐藏一些 div。

这是我目前掌握的一些代码。

if (jQuery("div.type:contains('Video')")) {
jQuery(".Code").hide();
jQuery(".Image").hide();
}

但我需要隐藏除正确的 div 之外的所有 div。

示例

HTML

<div class="type">video</div>
<div class="Video">Video Here</div>
<div class="Code">Code Here</div>
<div class="Image">Image Here</div>

jQuery

if (jQuery("div.type:contains('video')")) {
jQuery(".Video").show();
jQuery(".Code").hide();
jQuery(".Image").hide();
}
if (jQuery("div.type:contains('code')")) {
jQuery(".Video").hide();
jQuery(".Code").show();
jQuery(".Image").hide();
}
if (jQuery("div.type:contains('image')")) {
jQuery(".Video").hide();
jQuery(".Code").hide();
jQuery(".Image").show();
}

为什么这不起作用？

查看 jsfiddle，无论在 <div class="type"> 中输入什么，它都会显示 <div class="Image">Image Here</div>

jsfiddle 链接HERE

【问题讨论】：

查看 jsfiddle 输入 <div class="type"> 的任何内容都会显示 <div class="Image">Image Here</div>
是的，很抱歉

标签： javascript jquery html css contains

【解决方案1】：

您需要检查返回的 jQuery 对象的长度：

if (jQuery("div.type:contains('video')").length) {
  jQuery(".Video").show();
  jQuery(".Code").hide();
  jQuery(".Image").hide();
}

查看此更新的fiddle...

更详细地说，问题是所有的if 语句都返回了 true，因为所有 jQuery 选择器都返回 jQuery 对象，无论它们是是否为空。 if 语句的计算结果为 true，因为我们只是询问 jQuery 对象 是否不是 undefined 或 false。 jQuery 对象 不是这些东西。在尝试确定是否找到任何内容时，请记住始终检查 jQuery 对象的 length。

更新

就div.type 中没有任何内容时不显示任何内容而言，您可以在if 语句评估之前简单地隐藏所有内容。类似this...

【讨论】：

那就完美了。还有一件事。如果 Video、Code 或 Image 都没有输入类型，我怎么能没有可显示的内容？现在它会显示所有内容吗？
感谢您，特别是对我不正确的内容和原因的完整解释。
没问题。最后一点，你正在做的事情可以通过轻微的重组来大大缩短，比如this...

【解决方案2】：

if (jQuery("div.type:contains('video')").length > 0) {
jQuery(".Video").show();
jQuery(".Code").hide();
jQuery(".Image").hide();
}
if (jQuery("div.type:contains('code')").length > 0) {
jQuery(".Video").hide();
jQuery(".Code").show();
jQuery(".Image").hide();
}
if (jQuery("div.type:contains('image')").length > 0) {
jQuery(".Video").hide();
jQuery(".Code").hide();
jQuery(".Image").show();
}

【讨论】：

【解决方案3】：

我会改变你的 html 看起来更像这样：

<div class="type" style="display:none">image</div>
<div class="post video">Video Here</div>
<div class="post code">Code Here</div>
<div class="post image">Image Here</div>

并使用以下 javascript 代码：

var type = jQuery('.type').text().trim();

jQuery('.post').hide().filter('.' + type).show();

Here's a fiddle of the working code.

【讨论】：

【解决方案4】：

缩小版

 var a=jQuery("div.type").html();
 $(".Video,.Code,.Image").hide();
 jQuery("."+a).show();

在这里工作的小提琴

Fiddle

【讨论】：

【解决方案5】：

更改 =><div class="Code">Code Here</div> 改为 <div class="type">Code Here</div>

<div class="type">video</div>
<div class="type">Code Here</div>
<div class="Image">Image Here</div>

Working Fiddle

【讨论】：