Question

我有一个div，我想在悬停时替换它的html，但是在悬停时，我想将它替换回以前的html。（比如切换......）

代码：

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>

我试试这个

$(".inner").mouseover(function() {
    var tmpX = $(this).html();
    $(this).html("xxxxxxxxxxxx");
}).mouseout(function() {
    $(this).html(tmp);
});

由于

Answer 1

您需要将tmpX变量设为全局

var tmpX;
$(".inner").mouseover(function() {
    tmpX = $(this).html();
    $(this).html("xxxxxxxxxxxx");
}).mouseout(function() {
    $(this).html(tmpX);
});

Fiddle

Answer 2

您可以将旧文本作为数据属性存储在mouseenter上，稍后在mouseout上检索它：

$('.inner').hover(function(){
  $(this).data('oldtext', $(this).text()).text("xxxxxxxxxxxx");
}, function() {
  $(this).text($(this).data('oldtext'));
});

<强> Working Demo

Answer 3

使用hover()利用handlerIn/handlerOut
使用data-*保留原始文字
在handlerOut中，将其恢复为原始文字

$('.inner').hover(function() {
    var originalText = $(this).text();
    $(this).text('new text');
    $(this).attr('data-original-text', originalText);
  },
  function() {
    $(this).text($(this).attr('data-original-text'));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

Answer 4

错误1：变量错误，其tmpx不是tmp

错误2：您将var tmpx用作本地

var tmpX;
$(".inner").mouseover(function() {
    tmpx = $(this).html();
    $(this).html("xxxxxxxxxxxx");
}).mouseout(function() {
    $(this).html(tmpx);
});

Fiddle

Answer 5

有一个错字。使用此：

$(this).html(tmpX);

将tmpX变量拉出函数，使其变为全局变量！

完整脚本：

var tmpX = '';
$(".inner").mouseover(function () {
    tmpX = $(this).html();
    $(this).html("xxxxxxxxxxxx");
}).mouseout(function () {
    $(this).html(tmpX);
});

Answer 6

除了$(this).html(tmpX);中的错误，你需要在鼠标悬停功能之外设置tmpX var

var inner = $(".inner");
var tmpX = inner.text(); 
inner.mouseover(function() {            
     $(this).html( "xxxxxxxxxxxx" );
}).mouseout(function() {
     $(this).html(tmpX);
});

Answer 7

首先，它是tmpX而不是tmp。其次，当tmpX事件在mouseout event事件中实例化时，您试图在mouseover中分配tmpX。 mouseover仅适用于var tmpX; $(".inner").mouseover(function() { tmpX = $(this).html(); $(this).html( "xxxxxxxxxxxx" ); }).mouseout(function() { $(this).html(tmpX); });活动。

将tmpX var放在事件之外，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

registration_ids

替换div html就像切换一样

7 个答案: