Question

我不太喜欢jquery，我希望我的功能只能在悬停的div上工作。我有几个div（n从1到250）有图像和文本，我想在mouseover上改变一些css。 HTML是：`

<div id="serie" class="nspArtPage active nspCol1">
  <div id="archivio" class="nspArt nspCol4" style="padding:0 20px 20px 0;clear:both;">
     its divs with text and image
  <div id="archivio" class="nspArt nspCol4" style="padding:0 20px 20px 0;">
     its divs with text and image
  <div .... and so on </div>
</div>

but I can change it, adding code to have different ids (I've already tried.) In my "jQuery(document).ready(function()" I call that function

jQuery('#serie').on('mouseenter', '#archivio', function( event ) {
    jQuery("#archivio #arphoto p.nspText").css("display","block");
    jQuery("#archivio #bkgpanel").css("background-color","rgba(0, 0, 0, 0.5)");
}).on('mouseleave', '#archivio', function( event ) {
    jQuery("#archivio #arphoto p.nspText").css("display","none");
    jQuery("#archivio #bkgpanel").css("background-color","rgba(0, 0, 0, 0)");
});

`此时每次进入div时，所有div都有相同的行为。我想有单一的行为。我尝试了每个函数，使用委托函数，但我认为这不是正确的方法。感谢

Answer 1

您多次使用id="archivio"。

ID必须是唯一的，而是使用comman类

jQuery('#serie').on('mouseenter', '.archivio', function( event ) {
    //do something        
}).on('mouseleave', '.archivio', function( event ) {
    //do something      
});

将您的HTML修改为

<div  class="archivio nspArt nspCol4"

Answer 2

元素ID必须是唯一的，如果您有多个id="archivio"元素，则无法获得可靠的结果。请改用一个班级。所以：

<div id="archivio" class="nspArt nspCol4" style="padding:0 20px 20px 0;clear:both;">

变为：

<div class="archivio nspArt nspCol4" style="padding:0 20px 20px 0;clear:both;">

您还希望在事件处理程序中使用this来引用触发事件的特定元素，然后使用.find()查找所需的元素。像这样：

jQuery('#serie').on('mouseenter', '.archivio', function( event ) {
    jQuery(this).find("#arphoto p.nspText").css("display","block");
    jQuery(this).find("#bkgpanel").css("background-color","rgba(0, 0, 0, 0.5)");
}).on('mouseleave', '.archivio', function( event ) {
    jQuery(this).find("#arphoto p.nspText").css("display","none");
    jQuery(this).find("#bkgpanel").css("background-color","rgba(0, 0, 0, 0)");
});

Jquery一次将函数应用于单个div而不是全部

2 个答案: