Question

这是我的HTML：

  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>
  </ul>

这是我的js功能： -

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

我想要这种类型的输出： -

<ul>
        <li>Milk</li>
        <li>Bread</li>
        <li class='fade'>Chips</li>
        <li class='fade'>Socks</li>
<span> ***</span>
      </ul>

这里我尝试在鼠标悬停上添加一个跨度。
它的工作完美。
但是我想在最后一次之后追加一次感谢。

Answer 1

我在 jQuery api manual 上找到了这个例子，这不是你想要的吗？

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

或者你不想在鼠标离开时移除跨度，只想附加一个跨度：

$("li").hover(function () {
  if ($(this).find('span').length == 0) {
    $(this).append($("<span> ***</span>"));
  }
});

Answer 2

使用one：

$("li").one("hover", function () {
   $(this).append($("<span> ***</span>"));
});

http://api.jquery.com/one/

Answer 3

只需先检查范围是否已存在。请记住，如果要在鼠标离开后删除跨度，“悬停”可以采用两种功能。这相当于mouseover和mouseleave的组合。

$("li").hover(
  function () {
    if ($(this).is(':empty')) {
      $(this).append($("<span> ***</span>"));
    }
  });

参考文献：hover，empty，mouseover，mouseleave

Answer 4

使用现代JS！

<table>
        <tbody>
            <tr> <!-- This is data from the first station -->
                <td><? echo $decoded['Station']; ?></td>
                <td><? echo $decoded['Flight-Rules']; ?></td>
                <td><? echo $decoded['Wind-Direction']; ?> @ <? echo $decoded['Wind-Speed']; ?></td>
                <td><? echo $decoded['Altimeter']; ?></td>
            </tr>

            <tr> <!-- This is data from the next station -->
                <td><? echo $decoded['Station']; ?></td>
                <td><? echo $decoded['Flight-Rules']; ?></td>
                <td><? echo $decoded['Wind-Direction']; ?> @ <? echo $decoded['Wind-Speed']; ?></td>
                <td><? echo $decoded['Altimeter']; ?></td>
            </tr>
        </tbody>
    </table>

Documentation，CanIUse

在悬停附加跨度一次

4 个答案: