如果頁面h1包含某個單詞，顯示某個圖像？

我試圖展示一個圖像，它涉及到包含某個單詞的h1。假設我有20個頁面和20個圖像，並且每個頁面都有一個h1，其中包含與內容有關的單詞。我希望能夠僅在該頁面的h1中顯示與該單詞相關的圖像。這就是我正在使用的（我對此很糟糕！）試圖讓它顯示一個球的圖片。如果頁面h1包含某個單詞，顯示某個圖像？

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

我猜這是各種各樣的錯誤，因爲它什麼都沒顯示。我需要它不僅找到並顯示這個詞和圖像，但至少有20個不同的。

在此先感謝，非常感謝。

來源

2014-05-17 Jerpl

做一個簡單的string.search（「球」）來代替。 – ArtOfCode

我想你將不得不發佈HTML和更多的解釋，這將如何工作？ – adeneo

我同意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/

編輯：這也將匹配像「芭蕾舞女」的話讓你應該使用正則表達式代替

來源

2014-05-17 11:47:43 MonkeyVoodoo

謝謝，這似乎工作得很好，但我將如何加載與不同的單詞有關的不同圖像？ – Jerpl

只需添加儘可能多的if（）子句就可以了。您也不需要定義ballSrc，但只需將url放入if子句中即可 $（'。post_image'）。attr（'src'，'http://www.myserver.com/myimage.jpg'）; – MonkeyVoodoo

謝謝！最後一件事 - 有沒有辦法在一行上添加多個indexof搜索？只有它看起來區分大小寫，所以（'球'）和（'球'）是需要的。 – Jerpl

也許這樣？

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

來源

2014-05-17 11:38:54

你正在走錯這條路。你不應該檢查它可能是每個單詞。你可以用下面的第一行抓住這個單詞。把它變成一個網址，然後給它來源。

注意：尚未經過測試，但您可以通過下面幾行代碼完成所需操作。

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

來源

2014-05-17 11:38:57 CRABOLO

謝謝，雖然我對這個有點困惑。你能再解釋一下嗎？ – Jerpl

如果頁面h1包含某個單詞，顯示某個圖像？

回答

相關問題