Javascript 替换鼠标上方包含的元素文本

我只是想看看一位用户对关于通过鼠标切换内容的问题的回答。我所指的答案如下：

我想弄明白的是如何修改下面的代码，这样当用户将鼠标悬停在关联LI元素的任何区域上时，只会更改一些指定的文本

在本例中，您可以看到，当用户将鼠标悬停在包含H3标记的LI元素上时，我试图触发H3文本的替换

有什么想法可以快速解决这个问题吗？代码如下

<script type="text/javascript">
$( function() {
  $(".homepage-content-columns li h3").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});
</script>

<ul class="homepage-content-columns">
  <li class="blue spacer">
    <a href="#a">
    <h3 full="Switch Text A">Text A</h3>
    <p>some text here</p>
    </a>
  </li>
  <li class="green spacer">
    <a href="#b">
    <h3 full="Switch Text B">Text B</h3>
    <p>some text here</p>
    </a>
  </li>
  <li class="orange">
    <a href="#c">
    <h3 full="Switch Text C">Text C</h3>
    <p>some text here</p>
    </a>
  </li>
</ul>

$（函数（）{
$（“.homepage content columns li h3”）。悬停(
函数（）{
$（this.attr（'small'，$（this.html（））；
$（this.html（$（this.attr（'full'））；
},
函数（）{
$（this.html（$（this.attr（'small'））；
}
);
});

2小改动

1.

hover

事件必须更改为LI元素，而不仅仅是h3。 因此： 更改：

致：

2.由于该更改，

此

“是”li元素。 您希望更改包装在其中的H3，以便可以使用：

find("h3")

例如：

var htitle = $(this).find("H3");
 htitle.html(htitle.attr('full'));

把它们放在一起：

<script type="text/javascript">
$( function() {
  $(".homepage-content-columns li").hover(
    function () {
    htitle = $(this).find("h3");
      htitle.attr('small',htitle.html());
      htitle.html(htitle.attr('full'));
    },
    function () {
       $(this).find("h3").html($(this).find("h3").attr('small'));
    }
  );
});
</script>

$（函数（）{
$（“.homepage content columns li”）。悬停(
函数（）{
htitle=$（this.find（“h3”）；
htitle.attr（'small'，htitle.html（））；
html（htitle.attr（'full'））；
},
函数（）{
$（this.find（“h3”）.html（$（this.find（“h3”）.attr（'small'））；
}
);
});

2小改动

1.

hover

事件必须更改为LI元素，而不仅仅是h3。 因此： 更改：

致：

2.由于该更改，

此

“是”li元素。 您希望更改包装在其中的H3，以便可以使用：

find("h3")

例如：

var htitle = $(this).find("H3");
 htitle.html(htitle.attr('full'));

把它们放在一起：

<script type="text/javascript">
$( function() {
  $(".homepage-content-columns li").hover(
    function () {
    htitle = $(this).find("h3");
      htitle.attr('small',htitle.html());
      htitle.html(htitle.attr('full'));
    },
    function () {
       $(this).find("h3").html($(this).find("h3").attr('small'));
    }
  );
});
</script>

$（函数（）{
$（“.homepage content columns li”）。悬停(
函数（）{
htitle=$（this.find（“h3”）；
htitle.attr（'small'，htitle.html（））；
html（htitle.attr（'full'））；
},
函数（）{
$（this.find（“h3”）.html（$（this.find（“h3”）.attr（'small'））；
}
);
});

感谢您的注释-解决了如果您在非标准HTML属性中存储类似HTML的内容，您可能需要签出

.data

：感谢您的注释-解决了如果您在非标准HTML属性中存储类似HTML的内容，您可能想查看

.data

：您是否介意更新您的答案，包括根据您的建议修改的完整脚本，以便我可以接受您的答案？谢谢你回答你的问题？太好了！被接受为答案。对于您来说，唯一的后续问题是了解这种方法是否是一种好的方法，或者与这种方法相比，是否有更好/更符合要求的方法来实现这些目标。这种方法更符合逻辑，因为

悬停

位于

li

上，而

h3

是该特定

li

的“孩子”。我唯一不明白的是，为什么在悬停事件中有两个函数？我只是想确认一下，你说使用的方法确实是正确的，反过来，你发布的脚本修改表示这种方法是正确的？我只是因为你提到了这两个功能而感到困惑。你介意更新你的答案吗？包括用你的建议修改的完整脚本，这样我就可以接受你的答案了？谢谢你回答你的问题？太好了！被接受为答案。对于您来说，唯一的后续问题是了解这种方法是否是一种好的方法，或者与这种方法相比，是否有更好/更符合要求的方法来实现这些目标。这种方法更符合逻辑，因为

悬停

位于

li

上，而

h3

是该特定

li

的“孩子”。我唯一不明白的是，为什么在悬停事件中有两个函数？我只是想确认一下，你说使用的方法确实是正确的，反过来，你发布的脚本修改表示这种方法是正确的？我只是被你提到的两个函数弄糊涂了