jquery讓這個孩子改變img src

有一個老方法，我用了很多附加一個「-rollover」到img爲我節省了很多css規則，但是我遇到了一個我可以在其中不能讓它工作。jquery讓這個孩子改變img src

通常我只給img的一類側翻，然後使用這個jQuery的：

$(".rollover").hover(function() { 
    $(this).attr("src", $(this).attr("src").split(".").join("-rollover.")); 
}, function() { 
    $(this).attr("src", $(this).attr("src").split("-rollover.").join(".")); 
});

然而，在這種情況下，IMG正坐在一個元素，我想要的元素的懸停改變IMG SRC。

這裏是HTML的一個樣本：

<li class="rollover-child grid-item-2"> 
    <a href="#"> 
     <img src="img/copy/file.jpg" width="231" height="130" /> 
     <span class="gl-grid-text"> 
      <span class="gl-grid-title">Book!</span> 
      <span class="gl-grid-sub-text">View upcoming events</span> 
      <span class="gl-grid-arrow">&gt;</span> 
     </span> 
    </a> 
</li>

也有一些不具有錨，但仍需要翻轉效果列表中的項目，如

<li class="rollover-child> 
    <img src="img/copy/file.jpg" width="231" height="130" /> 
</li>

jQuery的我想是這樣的：

$(".rollover-child").hover(function() { 
    $('img', this).attr("src", $(this).attr("src").split(".").join("-rollover.")); 
}, function() { 
    $('img', this).attr("src", $(this).attr("src").split("-rollover.").join(".")); 
});

，但我不能讓它在所有的工作。我已經嘗試過與發現，孩子和兄弟姐妹的變化，但我必須做錯了什麼。

任何幫助極大的讚賞。

乾杯，亞歷

來源

2012-09-27 alexleonard

不應該'$（本）.attr（「SRC」）分裂（「」）加入。（「 - 翻轉」）'是像'$（」 img'，this）.attr（「src」）。split（「。」）。join（「 - rollover。」）'this'仍然指'li'標籤沒有' src'屬性!! – Vishal

Vishal我認爲使用$（'img'，this）和做$（this）.find（img） – alexleonard

是一樣的！但是當你設置'src'屬性時，你應該引用相同的選擇器;因爲您仍然需要引用相同的* img *標記。所以而不是'$（this）'你應該嘗試'$（'img'，this）' – Vishal

這樣做：

$(".rollover-child").hover(function() { 
    $('img', this).attr("src", function(index, currentAttributeValue){ 
     return currentAttributeValue.split(".").join("-rollover."); 
    }); 
}, function() { 
    $('img', this).attr("src", function(index, currentAttributeValue){ 
     return currentAttributeValue.split("-rollover.").join("."); 
    }); 
});

_{見.attr(attributeName, function(index, attr))}

來源

2012-09-27 07:12:14 Engineer

美麗！發揮魅力！ – alexleonard

使用$（'img'，this）.attr（「src」，$（'img'，this）.attr（「src」）。split（「。」）。join（「 - rollover。「））; 我真的不明白currentAttributeValue – alexleonard

@alexleonard的用法是的，請參閱我的評論下'sushanth reddy'的答案。你可以測試它。只需在'.rollover-child'元素內添加2個不同的'img'。你可以看到問題。 – Engineer

在這種情況下$（本）對應於<li class="rollover-child>和您試圖訪問$(this).attr("src")這是錯誤的..你需要在這裏定位圖像。

試試這個

$(".rollover-child").hover(function() { 
    $('img', this).attr("src", $(this).find('img').attr("src").split(".").join("-rollover.")); 
}, function() { 
    $('img', this).attr("src", $(this).find('img').attr("src").split("-rollover.").join(".")); 
});

來源

2012-09-27 07:24:24

如果'.rollover-child'元素中會有多個'img's，則所有'img's將具有第一個'img'元素的src'值。這個'$（this）.find（'img'）。attr（「src」）'是第一個'img'元素的'src'。 – Engineer

也是這樣做的，正如Vishal在問題評論 – alexleonard

$（'img'，this）中提到的那樣。attr（「src」，$（'img'，this）.attr（「src」）。split（「。」）。join（「 - rollover。」））;那麼也可以工作 – alexleonard

jquery讓這個孩子改變img src

回答

相關問題