Javascript 使用jQuery将数字添加到div的末尾

我正在使用jQuery在hover上创建一个简单的addClass。将鼠标悬停在

#科学面板编号

div上会触发一类

.active

添加到

#iphone屏幕编号

div中

以下是我的jQuery：

$('#science-panel-1').hover(function(){
    $('#iphone-screen-1').addClass('active');
},function(){
    $('#iphone-screen-1').removeClass('active');
});

$('#science-panel-2').hover(function(){
    $('#iphone-screen-2').addClass('active');
},function(){
    $('#iphone-screen-2').removeClass('active');
});

$('#science-panel-3').hover(function(){
    $('#iphone-screen-3').addClass('active');
},function(){
    $('#iphone-screen-3').removeClass('active');
});

我的HTML：

<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
            Content goes in here!
    </div>
    <div id="science-panel-2" class="science-panel__item">
        Content goes in here!
    </div>
    <div id="science-panel-3" class="science-panel__item">
        Content goes in here!
    </div>
</div>

<div class="col-md-4">
    div id="iphone-screen-1" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    div id="iphone-screen-2" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-3" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-4" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-5" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-6" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
</div>

<div class="col-md-4">
    <div id="science-panel-4" class="science-panel__item">
        Content goes in here!
    </div>
    <div id="science-panel-5" class="science-panel__item">
        Content goes in here!
    </div>
    <div id="science-panel-6" class="science-panel__item">
        Content goes in here!
    </div>
</div>

内容放在这里！
内容放在这里！
内容放在这里！
div id=“iphone-screen-1”class=“iphone屏幕项目”>
div id=“iphone-screen-2”class=“iphone屏幕项目”>
内容放在这里！
内容放在这里！
内容放在这里！

---

这感觉像是编写了很多代码来编写相同的脚本。有没有一种方法可以让一段脚本自己添加数字？As

#science-panel-1

将始终链接到

#iphone-screen-1

等

这将满足您的需要。只需将处理程序应用于ID以

science panel-

开头的元素，这些元素应该涵盖所有元素

$("[id^=science-panel-]").hover(function() {
    // get the corresponding iphone-screen element id
    var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
    $(iphoneScreen).addClass("active");
},function() {
    var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
    $(iphoneScreen).removeClass("active");
});

---

我首先要问的是，

active

类是否严格必要？如果CSS仅用于样式设置，那么您希望通过使用

：hover

伪类实现什么

如果出于某种原因您确实需要

.active

类，我会将标记更改为更通用一点，这样所有的科学面板都有一个CSS类

.science面板

，所有的iphone屏幕都有一个

.iphone屏幕

类。然后您可以简化JS，使其看起来像

$('.science-panel').on('mouseenter mouseleave', function(e) {
    $(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});

这将在您悬停的

.science面板

内找到

.iphone屏幕

，并在鼠标进入时将类切换为打开，在鼠标离开时将类切换为关闭

---

编辑：我看到您已经更新了答案，以包含您的标记，此答案假设您的iphone屏幕嵌套在“科学”面板中，因此如果您不/不能嵌套标记，则这不一定对您有效。我建议更改标记以包含驱动脚本所需的数据：

<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

并在每台机器上执行完全相同的脚本：

$('.science-panel__item').hover(function () {
    $($(this).data('target')).addClass('active');
//    ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
    $($(this).data('target')).removeClass('active');
});

---

如果更改属性和选择器，则可以将可重用功能应用于任何元素：

---

你能不能也分享一下你的HTMl，这样找到元素就更有帮助了对不起，HTMl补充了没有问题-很乐意帮忙：）

$('.science-panel__item').hover(function () {
    $($(this).data('target')).addClass('active');
//    ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
    $($(this).data('target')).removeClass('active');
});

$('[data-hover-target]').hover(function () {
    $($(this).data('hoverTarget')).addClass('active');
}, function () {
    $($(this).data('hoverTarget')).removeClass('active');
});