JS добавляет класс hover между двумя div, когда класс неизвестен.

Question

У меня есть вид карты и просмотр списка некоторых отелей, которые имеют следующие атрибуты:

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

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

Класс делится между двумя элементами hotel-23456 изменений на каждом результате отеля, потому что это создаваемых путем конкатенации строки (hotel-) с идентификатором базы данных отеля.

Что бы я хотел, используя jQuery, заключается в том, что когда пользователь наводится на результат списка, результат карты получает присоединенный класс hover, который будет выделять его на карте.

Проблема, с которой я сталкиваюсь, заключается в том, что в любое время может быть до 50 отелей, и я не уверен, как выбирать и связывать их, когда класс hotel-[id] постоянно меняется? Любые советы по этому поводу будут высоко оценены.

Answer 1

Я заблокировал, как я мог бы подойти к этому. Код не проверен, но должен дать вам общую идею.

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

Answer 2

Если ваши классы, как вы указали - вы могли бы сделать что-то вроде этого:

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

Это должно работать. Излишне говорить, что вы также должны привязать мышь, чтобы удалить классы.

Было предложено предложить! Data-id решение от @david - это правильный и не-хакерский способ сделать это.