添加其他事業部斷裂現有的jQuery代碼

我有內部的圖像很簡單的div：添加其他事業部斷裂現有的jQuery代碼

<div class="stack4"> 
    <img src="images/002m.jpg" width=200> 
</div>

而當你將鼠標懸停在圖像的一個非常簡單的jQuery功能：

$(function() { 
    $('.stack4>img').hover(function(){ 
    prompt('hello'); 
    }); 
});

這一切正常。不過，我想更多的內容添加到頁面，這樣就把下面的HTML直接在第一個div結束後：

<div id="menucontainer" class="menuContainer"> 
    <div id="menu" class="menuContent"> 
     <img src="images/003m.jpg" /> 
     <img src="images/004m.jpg" /> 
    </div> 
</div>

我添加此之後，jQuery的提示不再起作用。爲什麼要添加anothing div會破壞我現有的javascript命令？

來源

2011-09-04 thegreatt

它爲我工作[的jsfiddle（http://jsfiddle.net/6EtF2/1/） –

似乎工作完全沒對我來說：http://jsfiddle.net/9Sk8h/ –

你有沒有嘗試正確格式化第一個img？沒有結束標籤。 –

在導致失敗的頁面中必須有腳本錯誤。或者你的新html在某種程度上引入了一個隱藏的元素來覆蓋你的stack4圖像，這是一個很小的機會。如果您可以提供鏈接，有人可以爲您進行調試。

來源

2011-09-04 06:53:43 mrtsherman

你說得對 - 我檢查了CSS，其中一個新的div是隱形的，覆蓋了屏幕的100％。我不知道爲什麼我不想檢查，但謝謝你的推動！ – thegreatt

+1非常微小的機會=）。很高興你正在運行。 – mrtsherman

它因爲選擇器不再匹配任何元素而中斷（因爲類選擇器.stack4不再匹配任何元素）。

<div id="menucontainer" class="menuContainer"> 
    <div id="menu" class="menuContent"> 
     <img src="images/003m.jpg" /> 
     <img src="images/004m.jpg" /> 
    </div> 
</div> 

$(function() { 
    $('.stack4>img').hover(function(){ 
    prompt('hello'); 
    }); 
});

如果你看一下你的JavaScript，它會：

匹配類名stack4
元素的任何子圖像添加懸停監聽每個圖像
顯示一個提示懸停。

如果你看看你更新的DOM結構，類stack4不再存在。爲了使它再次工作，你必須用新的等價物替代這個選擇器，這個等效物將是id=menu和class = menuContent的div。

現在，根據您的需求，您可以定位#menu>img或.menuContent>img。如果您使用第一個，那麼javascript片段只能用於單個菜單，其ID爲menu。但是，如果您選擇第二種方法，則類menuContent中的任何內容都將具有此功能。所以，我會去用：

$(function() { 
    $('.menuContent>img').hover(function(){ 
    prompt('hello'); 
    }); 
});

來源

2011-09-04 07:05:09 PatrikAkerstrand

添加其他事業部斷裂現有的jQuery代碼

回答

相關問題