如果页面 h1 包含某个单词，则显示某个图像？答案

【问题标题】：Show a certain image if page h1 contains certain word?如果页面 h1 包含某个单词，则显示某个图像？
【发布时间】：2014-07-05 19:46:15
【问题描述】：

我正在尝试显示与包含某个单词的 h1 相关的图像。假设我有 20 页和 20 张图片，每个页面都有一个 h1，其中包含与内容相关的单词。我希望能够仅在该页面的 h1 中显示与该单词相关的图像。这就是我正在使用的（我对此很糟糕！）试图让它显示一个球的图片。

$(document).ready(function(){
   if ($("h1:contains('ball')").length) {
      $('.post_image').show(<a href="#"><img src="ball.jpg" /></a>);
   }                                           
});

我猜这是各种错误，因为它什么也没显示。我不仅需要它来找到并显示那个词和图像，而且至少需要 20 个不同的。

提前致谢，非常感谢。

【问题讨论】：

做一个简单的 string.search("ball") 代替。
我认为您必须发布 HTML 以及更多关于这将如何工作的解释？

标签： jquery css image show contains

【解决方案1】：

我同意 Stilly.stack 的观点，即您应该以不同的方式处理此问题。

如果你真的想检查 h1 是否包含一个单词，你可以这样做：

$(document).ready(function(){
   var ballSrc = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
   if ($("h1").text().indexOf('ball') !== -1) {
      $('.post_image').attr('src',ballSrc);
   }                                           
});

http://jsfiddle.net/aY5Nz/1/

编辑：这也会匹配像“ballerina”这样的词，所以你应该改用正则表达式

【讨论】：

谢谢，这似乎运作良好，但我如何加载与不同单词相关的不同图像？
只需根据需要添加尽可能多的 if() 子句。您也不需要定义 ballSrc，只需将 url 放入您的 if 子句中，例如$('.post_image').attr('src', 'myserver.com/myimage.jpg');
谢谢！最后一件事 - 有没有办法在一行上添加多个 indexof 搜索？只有它看起来区分大小写，所以需要 ('ball') 和 ('Ball')。
是的，您可以添加多个条件。例如 if($("h1").text().indexOf('ball') != -1 || $("h1").text().indexOf('Ball') != -1) { ...更优雅的是使用这样的正则表达式：jsfiddle.net/aY5Nz/2
是的，但是正则表达式看起来非常混乱，哈哈！感谢您的所有帮助，非常感谢。

【解决方案2】：

你做错了。您不必检查每个单词。你可以用下面的第一行来抓住这个词。把它做成一个url，然后给它来源。

注意：尚未对其进行测试，但您可以使用以下几行代码来完成您想要的操作。

    var theWord = $('h1').text();
    var theUrl = theWord + '.jpg';
    $('.post_image').attr('src', theUrl);

【讨论】：

谢谢，不过我对这个有点困惑。请您再解释一下好吗？

【解决方案3】：

也许是这个？

$(document).ready(function(){
   if ($("h1:contains(ball)")) {
      $('.post_image').show('<a href="#"><img src="ball.jpg" alt="ball" /></a>');
   }                                           
});

【讨论】：