Question

使用jQuery将鼠标悬停在div上时，我正在尝试更改其内容。我已经看到了堆栈溢出的答案，但似乎无法正常工作。

我尝试过

$( "imgDiv" ).mouseover(
    function() {
        $("tdiv").textContent = "hovering";
    }, 
    function() {
        $("tdiv").textContent = 'title';
    }
);

我也将“ mouseover”替换为“ hover”。我使用了一个变量和实际的div来代替“ imgDiv”。

这是我的代码的样子：

imgDiv = document.getElementById('imgDiv');
tDiv = document.getElementById('titleDiv');


$( "imgDiv" ).mouseover(
			  function() {
			      $("tdiv").textContent = "hovering";
			  }, function() {
			    $("tdiv").textContent = 'title';
			  }
			);

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}
#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">

<div id=titleDiv>title</div>

</div>

Answer 1

您可以使用jQuery定位div，并存储其原始值。鼠标移出时，可以将其还原。另外，使用mouseenter可以减少逻辑处理的次数，因为每当鼠标移到元素上时，mouseover都会触发。

var $titleDiv = $('#titleDiv');

$("#imgDiv")
  .on('mouseenter', function() {
    $titleDiv.data('originalText', $titleDiv.text());
    $titleDiv.text('hovering');
  })
  .on('mouseout', function() {
    $titleDiv.text($titleDiv.data('originalText'));
  });

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">

  <div id="titleDiv">title</div>

</div>

Answer 2

您可以将jQuery的.hover()函数与.text()函数一起使用来执行所需的操作。另外，不需要document.getElementById：

$("#imgDiv").hover(
  function() {
    $("#titleDiv").text("hovering");
  },
  function() {
    $("#titleDiv").text('title');
  }
);

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
  <div id="titleDiv">title</div>
</div>

Answer 3

首先，将$("imgDiv")替换为$("#imgDiv")，以获得ID为（＃）imgDiv的元素。

然后$("tdiv")不存在，您可能是说$("div")在DOM中选择一个<div>标签。

最后，$（“ tdiv”）。textContent不存在。您可以尝试$("div").html()或$("div").text()来获取<div>标签的内容

-

快速提醒：jQuery documentation on selectors

$("div")将选择<div>标签

$(".element")将选择带有class="element"的标签

$("#element")将选择带有id="element"的标签

Answer 4

您需要尝试这样

$( "#imgDiv" ).mouseover(function() {
			      $("#titleDiv").text("hovering");
			  }).mouseleave( function() {
			    $("#titleDiv").text('title');
			  });

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}
#imgDiv {
  width: 100px;
  height: 100px;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">

<div id=titleDiv>title</div>

</div>

Answer 5

简便的解决方案，

var s = document.getElementsByTagName('div');
function out() {
 s[0].innerHTML = 'hello';
}

function ibn() {
 s[0].innerHTML = 'Myname';
}

<div onmouseout = 'out()' onmouseenter = 'ibn()'> Myname </div>

Answer 6

您不能使用纯Javascript调用引用dom，而他们使用jQuery操作它-它将无法工作。

尝试一下：

let my_fruits = ['apple', 'banana', 'grapes', 'blueberries'];

for (let i = 0, len = my_fruits.length; i < len; i++)
{
    if (i == 0)
    {
        console.log("I am at first iteration. The last item is : "+ my_fruits[len - 1]);
    }
    if (i > 0)
    {
        console.log("I have now : " + my_fruits[i] + " and I have access to " + my_fruits[i - 1]);
    }
    if (i + 1 == len)
    {
        console.log("I am at last iteration. The first item is : "+ my_fruits[i - 1]);
    }
}

在您的代码中必须使用“＃”，然后是ID名称来引用$( "#imgDiv" ).mouseover(function() { $("#titleDiv").text("hovering"); }); ID。

另外，使用titleDiv代替$("#name_of_id").text("your content")

如何使用JQuery / Javascript更改悬停时div的内容

6 个答案: