Question

我想使用jquery来隐藏DIV，同时将鼠标悬停在DIV上并改为显示另一个DIV，类似于悬停效果。

我的代码一次选择了所有DIV，但是我只希望选择鼠标悬停在其上的DIV。我该怎么办？

我为DIV分配了唯一的CSS ID，并复制了相应的jQuery代码，并将代码修改为这些CSS ID。

但这意味着我必须为10个不同的DIV复制jQuery代码10次。

<div class="swapcontainer swaps3 nospacebetween contentpadding1 bgcolorred">
  <div class="swapsubcontainer swap1">
    <div id="div1a" class="swap first" style="display:block;">
      <div class="swappadding1">
        <p>text1</p>
      </div>
    </div>
    <div id="div1b" class="swap second" style="display:none;" >
      <div class="swappadding1">
        <p>text2</p>
        <a href="/">link</a>
      </div>
    </div>
  </div>
  <div class="swapsubcontainer swap2">
    <div id="div1a" class="swap first" style="display:block;">
      <div class="swappadding1">
        <p>text1</p>
      </div>
    </div>
    <div id="div1b" class="swap second" style="display:none;" >
      <div class="swappadding1">
        <p>text2</p>
        <a href="/">link</a>
      </div>
    </div>
  </div>

  <div class="clear"></div>
</div>

jQuery(document).ready(function(){
  jQuery(".swapsubcontainer").mouseenter(function(){
    jQuery(".swapsubcontainer").children(".first").css("display", "none");
    jQuery(".swapsubcontainer").children(".second").css("display", "block");
  });
  jQuery(".swapsubcontainer").mouseleave(function(){
    jQuery(".swapsubcontainer").children(".first").css("display", "block");
    jQuery(".swapsubcontainer").children(".second").css("display", "none");
  });
});

请参阅：http://jsfiddle.net/ander9023/dwcfgqp5/

如何更改jQuery代码，以便可以将其通用地用于任何数量的这些DIV，但只能在当前鼠标所在的DIV上使用？

Answer 1

将jQuery（“。swapsubcontainer”）更改为$（this）

jQuery(document).ready(function(){
   jQuery(".swapsubcontainer").mouseenter(function(){
      $(this).children(".first").css("display", "none");
      $(this).children(".second").css("display", "block");
   });
   jQuery(".swapsubcontainer").mouseleave(function(){
      $(this).children(".first").css("display", "block");
      $(this).children(".second").css("display", "none");
   });
});

通用JQuery语句，用于处理许多直接子元素

1 个答案: