Question

下面是HTML代码：

$('#shadowfax').hover(function () {
  $('#horsename').attr({
    class: 'display-5',
    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});
},
function () {
  $('#horsename').text('A Horse with no name');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm">
  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">
</div>
<div class="row">
  <div class="col-lg">
    <p class="display-4" id="horsename">A Horse with no name</p>
  </div>
</div>

我无法基于对shadowfax元素的悬停来更改horsename元素的内容。

我正在使用jQuery v3.3.1和Bootstrap v4。

谢谢

Answer 1

您在这里找到解决方法

$('#shadowfax').hover(function () {
  $('#horsename')
    .attr("class", 'display-5')
    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');
}, function () {
  $('#horsename').text('A Horse with no name');
});

.display-4 {
  font-size: 14px;
}

.display-5 {
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm">
  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">
</div>
<div class="row">
  <div class="col-lg">
    <p class="display-4" id="horsename">A Horse with no name</p>
  </div>
</div>

设置文本的方式只会设置文本属性，而不会更改文本。

$('#horsename').text(UPDATED_TEXT)将更新DOM文本，而$('#horsename').attr("text", UPDATED_TEXT)将添加具有 UPDATED_TEXT 值的文本属性。

希望这会对您有所帮助。

Answer 2

您应该对马名元素使用.text()和toggleClass()或（addClass / removeClass）方法-

注意：发布的html中有end div标签，没有开始标签。请在您的一端进行验证。

var $horsName = $('#horsename');
$('#shadowfax').hover(function () {
      $horsName.toggleClass('display-5');
      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');
    },
    function () {
        $horsName.toggleClass('display-5');
        $horsName.text('A Horse with no name');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm">
   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">
</div>
<div class="row">
 <div class="col-lg">
      <p class="display-4" id="horsename">A Horse with no name</p>
  </div>
</div>

Answer 3

您的代码中存在语法问题。

具有正确解决方案的代码示例：

$('#shadowfax').hover(function () {
  $('#horsename')
    .attr("class", 'display-5')
    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');
}, function () {
  $('#horsename').text('A Horse with no name');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm">
  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">
</div>
<div class="row">
  <div class="col-lg">
    <p class="display-4" id="horsename">A Horse with no name</p>
  </div>
</div>

Answer 4

您可以像这样简单地在HTML元素上使用事件-

<div class="col-sm">
        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">
    </div>
    <div class="row">
      <div class="col-lg">
          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>
      </div>
    </div>

Enumerable.Take Method

无法使用jQuery设置多个属性

4 个答案: