Question

我无法让这个简单的.replaceWith()与.hover()合作。会感激一些帮助。

当我将鼠标悬停在文本上时，我希望将文本更改为EXPAND，并在鼠标输出时返回SHOWS。我可以将文本更改为EXPAND，但我无法将文本恢复为原始的SHOWS。

JSFiddle代码，适合所有人查看。

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').replaceWith('<h2>Expand</h2>');
      }, 
      function () {
        $('#shows').replaceWith('<h2>Shows</h2>');
      }
    );
});

Answer 1

问题是当你替换它时会丢失id属性。因此，虽然mouseout事件的hover()函数触发但它找不到元素#shows。

请改为尝试：

// Change H1 text to "EXPAND" when hovered on, and go *back* to "SHOWS" when the mouse leaves

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').text('Expand');
      },
      function () {
        $('#shows').text('Shows');
      }
    );
});

你应该总是在这样的例子中使用.text()或.html()，因为你想要做的就是改变TEXT的内部位或<h2>标签中包含的HTML，而不是比整个元素。

如果你想使用replaceWith：

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').replaceWith('<h2 id="shows">Expand</h2>');
      },
      function () {
        $('#shows').text('<h2 id="shows">Shows</h2>');
      }
    );
});

Answer 2

.replaceWith()将完全替换原始元素（#shows） - ＆gt;不会再找到id=#shows的元素（第二次尝试将失败）。

您想要做的是替换#shows的内部html（使用.html()）：

$(document).ready(function() {   
   $("p").hover(
      function () {
        $('#shows').html('<h2>Expand</h2>');
      }, 
      function () {
        $('#shows').html('<h2>Shows</h2>');
      }
    );
});

Answer 3

使用.replaceWith()方法后，元素#shows不再存在且无法再替换：）

结合.hover（）和.replaceWith（）

3 个答案: