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); 
}); 

Вы, вероятно, также хотят, чтобы добавить некоторые .stop() вызовы перед вашими fadeTo и animate вызовов, в противном случае, когда вы быстро и быстро наводите указатель мыши, анимации будут скопированы в очередь.

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); 
});