JS在類未知時在兩個div之間添加懸停類。

我有一個地圖視野和一些酒店具有以下屬性的列表視圖：JS在類未知時在兩個div之間添加懸停類。

/*List Result*/ 
<div class="hotel-result hotel-23456"> 
    ...Content... 
</div> 

/*Map Result*/ 
<div class="map-hotel-result hotel-23456"> 
    ...Content... 
</div>

兩個元素，因爲它正在通過連接字符串創建的每一個酒店的結果hotel-23456變化之間共享的類（hotel- ）與酒店的數據庫ID。

我想發生，使用jQuery，就是當用戶將鼠標懸停在列表上導致地圖結果時附加類的hover將突出它在地圖上。

我遇到的問題是，在任何時間最多可以顯示50家酒店，而我不確定如何在hotel-[id]課程不斷變化時選擇和綁定這兩個酒店。任何意見，將不勝感激。

來源

2016-03-08 Tom Pinchen

'el1.onmouseover = function（）{el2.className = this.className; };' – destoryer

我阻止了我如何處理這個問題。代碼沒有經過測試，但應該給你的一般想法。

<div data-hotel-id="23456" class="hotel-result hotel-23456"> 
    ...Content... 
</div> 

/*Map Result*/ 
<div class="map-hotel-result hotel-23456"> 
    ...Content... 
</div> 


var $hotelListResults = $('.hotel-result'); 
var $hotelMapResults = $('.hotel-map-result'); 

$hotelListResults.hover(function(){ 
    var hId = $(this).data('hotel-id'); 
    $hotelMapResults.not('.hotel-'+hId).removeClass('hover'); 
    $('.hotel-'+hId).addClass('hover'); 
});

來源

2016-03-08 19:29:45 David

好主意！我甚至沒有想過使用數據屬性。這工作完美謝謝:) –

如果類如你所指出的那樣 - 你可以做這樣的事情：

$('.hotel-result').on('mouseenter',function(){ 
    var classname = $(this).attr('class');//result should be 'hotel-result hotel-2465'; 
    var mapclass = '.map-'+classname.replace(/ /g,'.');//this is basically replacing 'space' globally with '.', class identifier in jQuery 

    $(this).addClass('Your_hover_class'); 
    $(mapclass).addClass('your_hover_class'); 
});

這應該工作。不用說，類似地，你必須綁定一個mouseleave來刪除這些類。

即將建議！ @david的data-id解決方案是正確的，也是非常不方便的做法。

來源

2016-03-08 19:27:21 Anubhab

JS在類未知時在兩個div之間添加懸停類。

回答

相關問題