如果ID具有類，則設置另一個元素的屬性

Question

我試圖檢測是否存在一個類，如果存在，則設置另一個元素的background屬性。 這是我所擁有的，但不起作用。

if(jQuery("#slider-banner").hasClass('living-nutrients'))
    {
        jQuery("#home-middle-first").css("background-image","[path to new background image]");
    }

順便說一句-我的下一步是在ID“滑塊橫幅”更改時立即檢測到它，但是到目前為止，我什至無法在頁面加載時使它正常工作。 任何幫助將不勝感激...謝謝！

編輯：我按照指示從.attr更改為.css。 有道理...但仍然無法正常工作。 我嘗試在IF語句中添加console.log消息，但也一無所獲。 那會給任何人更多的想法嗎？

類更改的示例HTML：

<img id="slider-banner" class="living-nutrients" src="[image path]">

我要更改背景圖片的HTML示例：

<div class="home-middle-one-third" id="home-middle-first">
        <a href="#"></a>
    </div>

更新：

對於每個說“應該工作”的人……你是對的！ 事實證明，正如所寫的那樣，它不喜歡位於頁面的頁腳中，但是當我將其移至頁眉時，請記住！

這個難題的最后一步是讓它根據＃slider-banner的更改（或更准確地說，是ID區域中存在的類）進行檢測和評估，而不僅僅是像現在這樣加載頁面。

該ID用於滑塊中幻燈片的一個元素。 根據可見的幻燈片，我可以為ID分配三種可能的類。 因此，每次幻燈片更改時，我都需要腳本來評估。

有任何想法嗎？ 謝謝你們！

Answer 1

background-image是元素的樣式屬性，而不是其自己的屬性。

因此.css("background-image","[path to new background image]");

Answer 2

幾乎！

if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
    jQuery("#home-middle-first").css("background-image","[path to new background image]");
}

css是設置CSS屬性的正確函數。
attr將設置HTML屬性。 <div attr='attr value'>

編輯
在以下示例中，我有點猜測您的腳本的功能。
當您設置background-image一個HTML節點，這就是它的作用是設置背景圖片。 您還必須相應地將所有節點的寬度和高度設置為足夠大，甚至可以看到節點的背景。 背景圖像不會自動調整節點的大小。

var slider = jQuery("#slider-banner"); // jQuery("#slider-banner") is slow, so we save it to a var if we use it more than once
console.log(slider); // should be this in Chrome: [<img id="slider-banner" class="living-nutrients" src="[image path]">]
if(slider.hasClass('living-nutrients'))
{
    jQuery("#home-middle-first").css({
        "background-image":"url("+slider.attr('src')+")", // url() for good meassures
        //"background-image":slider.css('background-image'), //try this if that doesn't work
        "height":slider.height(),
        "width":slider.width()
    });
}

這是一個工作示例。

Answer 3

嘗試這個

jQuery("#home-middle-first").css("background-image","url([path])");