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

我的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>

$('.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，具体取决于悬停的“提示图标”。我需要做的是，在“提示图标”鼠标上，它将获取父div的id并删除前3个字母，这样它就是剩下的数字，并将其存储到一个变量中。然后我想获取这个变量并在$（'？？？'）.addClass（'tip-show'）中使用它；那么那是什么？？？被变量替换，使其成为1-3类的div之一将根据悬停的“提示图标”添加“提示显示”类

---

您不需要绕过

类

属性的字符串，因为您只需使用

index（）

检索表示选择器中元素位置的数值。试试这个：

$('.tip-icon').on({
    mouseenter: function () {
        $('.' + ($(this).index('.tip-icon') + 1)).addClass('tip-show'); 
    },
    mouseleave: function () {
        $('.' + ($(this).index('.tip-icon') + 1)).removeClass('tip-show'); 
    }
});

然后，可以通过使用

悬停

和

切换类

来缩短时间：

$('.tip-icon').hover(function () {
    $('.' + ($(this).index('.tip-icon') + 1)).toggleClass('tip-show'); 
});

---

不要为了从类中获取id而进行所有的字符串混搭。而是使用

data-*

attributes将元素/功能绑定在一起

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

活生生的例子：

你是说像这样

$('.tip-icon').mouseenter(function() {
  var id = $(this).parent().attr('id').substring(3, 1);
  $('#'+id).addClass('tip-show');
});

---

只需使用html5

数据

属性：

---

在这里拉小提琴：

您可以将

鼠标悬停

作为

鼠标指针

和

鼠标悬停

的组合使用。使用

regex

获取父项的

id

中的数字

$('.tip-icon').hover(function () {
    var id = $(this).parent().attr('id').replace(/[a-z]/ig, '');
    // Get the number from the id

    $('.' + id).addClass('tip-show').show();
}, function () {
    $('.content').removeClass('tip-show').hide();
});

演示：

试试看

$(".tip-icon").hover(

function () {
    $('.' + $(this).parent().attr("id").replace('tip', '')).addClass('tip-show');
}, function () {
    $('.' + $(this).parent().attr("id").replace("tip", "")).removeClass('tip-show');
});

---

使用JQuery链接概念

检查JQuery：

$('.tip-icon').mouseenter(function () {
    var idValue = $(this).parent('div').attr('id').substr(3, 4);
    $('.'+idValue).addClass('tip-show');
});
$('.tip-icon').mouseleave(function () {
    var id_Value = $(this).parent('div').attr('id').substr(3, 4);
    $('.'+id_Value).removeClass('tip-show');
});

演示：

---

我不知道为什么这一点会被否决？OP描述了他的目标、问题并提供了一个例子。人们还想要什么？@Rorymcrossan否决票上的alt文本写道：“这个问题没有显示任何研究成果；它不清楚或没有用处（再次单击可撤消）”。我个人认为这表明没有任何研究工作，因为标题中的三点都是微不足道的。我也觉得这个问题对将来的任何人来说都没有用处，因为它的措辞不适合搜索，而且它是如此的琐碎，以至于任何有基本功能知识的人都不会问它。有很多方法，但我认为使用数据属性是做事情的正确方式，谢谢

$('.tip-icon').mouseenter(function () {
    var idValue = $(this).parent('div').attr('id').substr(3, 4);
    $('.'+idValue).addClass('tip-show');
});
$('.tip-icon').mouseleave(function () {
    var id_Value = $(this).parent('div').attr('id').substr(3, 4);
    $('.'+id_Value).removeClass('tip-show');
});