添加数字到div结束与jQuery

我使用jQuery在悬停时创建一个简单的addClass。将鼠标悬停在#science-panel-numberdiv上，可以将.active类添加到#iphone-screen-numberdiv中。

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

这感觉就像很多代码来做相同的脚本。有没有一种方法，有一个脚本，可以添加数字它自己?因为#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");
});

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

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

我首先问active类是否严格必要?如果CSS只是通过使用:hover伪类来进行样式化，那么您想要的是什么呢?

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

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

这将找到你悬停在.science-panel中的.iphone-screen，并在鼠标进入时切换类为on，当鼠标离开时切换类为off。

编辑:我看到你已经更新了你的答案，包括你的标记，这个答案是假设你的iphone屏幕嵌套在科学面板，所以这并不一定适用于你，如果你不/不能嵌套你的标记

相关内容

最新更新

热门标签：