javascript - 使用 Javascript(不是 CSS!)在悬停时同时替换多个 文本

Question

我需要一次更改多个菜单项悬停时的文本，但我不能使用 CSS，也不能为每个单独的项目提供自己的 CSS 类。我想做的是当鼠标悬停在 .menu-wrapper 上的任何位置时Javascript 替换了每个 <li>带有相关替换文本的项目文本。

我有一个非常适合单个项目的脚本:

    <div class="menu-wrapper">
        <ul>
            <li>WORD1</li>
        </ul>
    </div>

Javascript:

var originalText = $('.menu-wrapper > ul > li').text();

$('.menu-wrapper').hover(function () {

    var $p = $(this).find('li');
    $p.fadeOut(300, function () {
        $(this).text('replacement word 1').fadeIn(300);
    });
}, function () {
    // set original text
    $(this).find('li').fadeOut(300, function () {
        $(this).text(originalText).fadeIn(300);
    });
});

但显然如果你添加多个 <li>它破坏的项目是因为它只存储一个 .text() 变量并在第一个 mouseout 事件后连接所有条目。

我尝试使用 switch语句来查找 .text() 的值并相应地更改文本值，但它不起作用(我的 Javascript 很弱...)。

我将不胜感激任何帮助。我只有四个项目来替换文本，因此根据需要重复任何脚本不是问题。通常我会给每个人自己的类标识并使用我已经拥有的，但不幸的是我不能。

请不要建议使用 CSS，因为我已经知道该怎么做，但为此我需要使用 Javascript。

我在其他地方找不到这个问题。

谢谢!

Answer 1

主要问题是第一行:

var originalText = $('.menu-wrapper > ul > li').text();

这将从集合中的所有元素获取所有文本:

您可以使用 jQuery data() 遍历元素并处理实例，将文本存储在每个元素上:

$('.menu-wrapper > ul > li').each(function(){
     $(this).data('original', $(this).text());
});

然后在 hover 的 mouseout 部分再次使用 data() 读取之前存储的文本

$(this).find('li').fadeOut(300, function () {
    var originalText = $(this).data('original');
    $(this).text(originalText).fadeIn(300);
});

新文本的几个选项:

将其作为数据属性放在标记中

<li data-alt_text="alternate word">

然后在 hover 的 mousenter 回调中:

$p.fadeOut(300, function () {
    $(this).text($(this).data('alt_text')).fadeIn(300);
});

或者放入数组并使用第一个循环将数组数据添加到元素

var words=['W1','W2','W3'];
// first argument of "each" is "index"
$('.menu-wrapper > ul > li').each(function(index){
     $(this).data(
         {
             'alt_text': words[index],
             'original', $(this).text()
           }
      );
});