使用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的末尾

回答

相關問題