使用 jQuery 只显示一个类的实例

Question

我已经用谷歌搜索过这个，但没有用（可能搜索技能很差）。

我的问题可能很简单，我只是希望 mouseover 事件仅在列表项被鼠标悬停时显示包含的 div (.action) (ui-state-default)。

这是标记

<ul id="column-2" class="connectedSortable">
    <li class="ui-state-default">feature
        <div class="action">
            <img src="delete.png" class="delete" alt="Delete this Story">
            <br />
            <img src="duplicate.png" class="delete" alt="Duplicate this Story">
        </div>
    </li>
    <li class="ui-state-default">forward
        <div class="action">
            <img src="delete.png" class="delete" alt="Delete this Story">
            <br />
            <img src="duplicate.png" class="delete" alt="Duplicate this Story">
        </div>
    </li>
</ul>

还有 JavaScript

$(function() {  
    $(".ui-state-default").mouseenter(function(){
        $(".action").show();
    }).mouseleave(function(){
        $(".action").hide();
        });
});

现在我意识到这将显示 .action 的每一次出现 - 但我如何确保它仅在其父 li 中显示它？我尝试过使用 jquery 父/子争论，但失败得很惨。

任何帮助将不胜感激。

Answer 1

$(function() {
  $(".ui-state-default).mouseenter(function() {
    $(this).find(".action").show();
  }).mouseleave(function() {
    $(this).find(".action").hide();
  });
});

或者只使用 hover() 事件：

$(function() {
  $(".ui-state-default").hover(function() {
    $(this).find(".action").show();
  }, function() {
    $(this).find(".action").hide();
  });
});

代替：

$(this).find(".action")

你也可以这样做：

$(this).children(".action")

或任何其他选择它的方式。

Answer 2

您应该将“.action”限制为当前上下文（您悬停的列表项）：

$(function (){
  $(".ui-state-default").hover(
    var listItem = this;
    function (){
      $(".action", listItem).show();         
    }
    ,
    function (){
      $(".action", listItem).hide();         
    }
  );
});