Question

我试图在wp post上显示不同的内容，具体取决于metabox（Dropdown）的值。因此，如果我在下拉列表中选择“视频”，“代码”和“图像”作为选项，我会创建一个隐藏的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 Link HERE

Answer 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 ...

这样的东西

Answer 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();
}

Answer 3

缩小版

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

在这里工作小提琴

Fiddle

Answer 4

我会改变你的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.

Answer 5

更改=＆gt; <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

jQuery - 寻找一个特定的单词

5 个答案: