jQuery -查找一个特定的单词

jQuery - Look for a specific word

本文关键字：一个 单词 查找 jQuery      更新时间：2023-09-26

我试图根据metabox(下拉框)的值在wp post上显示不同的内容。所以，如果我有"视频"，"代码"answers"图像"可作为下拉菜单中的选项，我想做一个隐藏的div，会说"视频"，"代码"或"图像"取决于所选的一个。然后我需要jQuery(或Javascript)来查看隐藏的div为以太字，并显示/隐藏一些div的。

这是我目前写的一些代码。

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

但是我需要的是隐藏所有的div，除了正确的。

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

jsfield链接到这里

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

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

查看更新后的提琴…

进入更详细的一点，问题是，所有的if语句返回真，因为所有的jQuery选择器返回jQuery对象，无论他们是空的或不。if语句被评估为true，因为您可以简单地询问jQuery对象是否不是undefined或false。一个jQuery对象不是这些东西。当试图确定是否发现任何内容时，请记住始终检查jQuery对象的length。

在div.type中没有任何内容时不显示任何内容，您可以在if语句求值之前隐藏所有内容。

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

我会改变你的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();

缩版

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

Working Fiddle Here

小提琴

Change => <div class="Code">Code Here</div> TO <div class="type">Code Here</div> 

<div class="type">video</div>
<div class="type">Code Here</div>
<div class="Image">Image Here</div>
工作小提琴

相关文章：