javascript - 如何获取父 div 的 id，然后取出名称的前 3 个字母并将名称的最后一位数字存储到变量中？

Question

我有这样的 HTML 结构:

<div id="tip1">
    <div class="tip-icon"></div>
</div>
<div id="tip2">
    <div class="tip-icon"></div>
</div>
<div id="tip3">
    <div class="tip-icon"></div>
</div>
<div class="1 content"></div>
<div class="2 content"></div>
<div class="3 content"></div>

我有一个像这样的 jQuery 函数:

$('.tip-icon').mouseenter(function() {
    $('.1').addClass('tip-show'); //Change .1 to a variable
});
$('.tip-icon').mouseleave(function() {
    $('.1').removeClass('tip-show2'); //Change .1 to a variable
});

但我希望它不是 $('.1')，而是类编号 1-3，具体取决于悬停在哪个“提示图标”上。我需要做的是，在“tip-icon”mouseenter 上，它将获取父 div 的 id 并删除前 3 个字母，以便它只是剩下的数字并将其存储到变量中。然后我想获取这个变量并在 $('???').addClass('tip-show'); 中使用它所以这样 ？？？被变量替换以使其具有类 1-3 的 div 之一将根据悬停的“tip-icon”添加“tip-show”类。

https://jsfiddle.net/oak4L9ga/

Answer 1

不要仅仅为了从类中获取 id 就进行所有字符串混搭。相反，使用 data-* 属性将您的元素/功能联系在一起

<div id="tip1" data-tipid="1">
    <div class="tip-icon"></div>
</div>

然后您可以在代码中使用它来获取正确的 id(实际上，在您的案例中是类名称)

$('.tip-icon').mouseenter(function () {
    var tipId = $(this).parent().data('tipid');
    $('.' + tipId).addClass('tip-show'); //Change .1 to a variable
});

实例:https://jsfiddle.net/oak4L9ga/6/