Question

我使用jQuery在悬停时创建一个简单的addClass。将鼠标悬停在JPanel div上可触发将#science-panel-number类添加到.active div。

这是我的jQuery：

#iphone-screen-number

我的HTML：

$('#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');
});

这感觉就像执行相同脚本的很多代码一样。有没有办法让一个脚本可以自己添加数字？由于<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>将始终链接到#science-panel-1，依此类推。

Answer 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");
});

Answer 2

我建议更改标记以包含驱动脚本所需的数据：

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

这允许您一次选择所有科学面板项目：

$('.science-panel__item')

并在每个脚本上执行完全相同的脚本：

$('.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');
});

Answer 3

我首先要问active课是否是绝对必要的？如果只使用:hover伪类进行样式化，可以用CSS实现你想要的吗？

如果由于某种原因确实需要.active类，我会将标记更改为更通用，以便所有科学面板都具有.science-panel的CSS类和所有iphone屏幕有一类.iphone-screen。然后你可以简化JS看起来像

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

如果鼠标在鼠标离开时鼠标进入和关闭，这将会找到您悬停在.iphone-screen内的.science-panel并将该类切换为开启。

编辑：我看到你已经更新了你的答案以包含你的标记，这个答案是假设你的iphone屏幕嵌套在科学小组中，所以如果你不这样做，这对你不一定有效。 t /无法嵌套您的标记

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

3 个答案: