jQuery的影響與同名

Question

所有元素這是我的HTML文件中的代碼：

<div id="centerBlock"> 
     <block> 
      <site style="padding-top: 10px; margin-left: 20px"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="padding-top: 10px; margin-left: 20px"> 
       lolol 
      </textOnImage> 
     </block> 

     <block> 
      <site style="padding-top: 163px; margin-left: 20px"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="padding-top: 163px; margin-left: 20px"> 
       lolol 
      </textOnImage> 
     </block> 

    </div> 

這是我的javascript：

$("block").mouseenter(function(){   
    $("site").fadeTo("slow", 0.25); 
    $("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $("site").fadeTo("slow", 1); 
    $("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

然而，當我將鼠標懸停在這兩個塊的一個元素都是不透明的，當我將鼠標從它移開時，它們都會回到原始狀態。我搜索了幾個小時，並且我100％確定我一直在搜索不正確的條款。我如何單獨做他們？

Answer 1

使用this僅定位觸發事件的塊，然後使用.find()在該特定塊中查找所需的元素。你之前的做法顯然是在整個頁面中找到所有site元素和所有textOnImage元素，而不僅僅是觸發事件的塊中的元素。

$("block").mouseenter(function(){   
    var $this = $(this); 
    $this.find("site").fadeTo("slow", 0.25); 
    $this.find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    var $this = $(this); 
    $this.find("site").fadeTo("slow", 1); 
    $this.find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

Answer 2

您需要遍歷元素的結構。您可以使用.find()這樣的...

$("block").mouseenter(function(){   
    $(this).find("site").fadeTo("slow", 0.25); 
    $(this).find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $(this).find("site").fadeTo("slow", 1); 
    $(this).find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

在事件處理函數，this是對元素的引用到處理程序的約束。

你可以因爲有針對性的元素也使用.children()代替.find()都只有一級。

---

側面說明，您可以使用.hover()，並通過兩個功能這樣的..

$("block").hover(function(){   
    $(this).find("site").fadeTo("slow", 0.25); 
    $(this).find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}, 
    function(){   
    $(this).find("site").fadeTo("slow", 1); 
    $(this).find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
}); 

你可能也想在你fadeTo和animate呼叫添加一些.stop()電話，否則當你快速移動鼠標，動畫將被排隊備份。

Answer 3

試試這個（提供this上下文jQuery選擇定位的特定元素）：

$("block").mouseenter(function(){   
    $("site", this).fadeTo("slow", 0.25); 
    $("textOnImage", this).animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $("site", this).fadeTo("slow", 1); 
    $("textOnImage", this).animate({ 
     opacity: "0" 
    }, 600); 
});