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

我使用jQuery在悬停时创建简单的addClass。将鼠标悬停在#science-panel-number格上会触发一类.active被添加到#iphone-screen-number格。使用jQuery将数字添加到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>

这感觉就像是大量的代码做同样的脚本。有没有办法让一个脚本可以自己添加数字？由于#science-panel-1将始终链接到#iphone-screen-1等。

来源

2016-11-04 probablybest

能否请您分享您的HTML，以及使之更有助于FUL找出元素 – Samir

是的，对不起，HTML添加 – probablybest

这将做你所需要的。只是应用处理程序元素的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"); 
});

来源

2016-11-04 12:50:34 Archer

辉煌，正是我需要的牛逼要你。 – probablybest

没问题 - 高兴帮忙:) – Archer

我会先问，如果active类是绝对必要的？如果仅通过使用:hover伪类来创建样式，可以使用CSS实现您想要的效果吗？

如果您确实需要.active类由于某种原因，我会改变的标记是一个小更通用的，所以，所有的科学小组有一个CSS类的.science-panel和所有的iPhone屏幕有一类.iphone-screen。然后，你可以简化JS看起来像

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

这会发现，你将鼠标悬停在与切换类上，如果鼠标进入和关闭当鼠标离开它的.science-panel内的.iphone-screen。

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

来源

2016-11-04 12:58:16 Dymos

我建议改变的标记，包括你需要驾驶脚本中的数据：

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

来源

2016-11-04 13:05:52 zzzzBov

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

回答

相关问题