当 class 未知时，JS 在两个 div 之间添加悬停 class。

Question

我有一些酒店的地图视图和列表视图，它们具有以下属性：

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

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

两个元素 hotel-23456 共享的 class 在每个酒店结果中都会发生变化，因为它是通过将字符串 (hotel-) 与酒店的数据库 ID 连接起来创建的。

我希望使用 jQuery 发生的是，当用户将鼠标悬停在列表结果上时，地图结果会收到附加的 class of hover，这将突出显示它在地图上。

我遇到的问题是任何时候最多可以显示 50 家酒店，我不确定如何 select 并在 hotel-[id] class 时将两者绑定不断变化？对此有任何建议将不胜感激。

Answer 1

如果您的类正如您所指出的那样 - 您可以这样做：

$('.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 解决方案是正确且非 hacky 的方法。

Answer 2

我已经排除了我可能如何处理这个问题。代码未经测试，但应该给你大致的想法。

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

当 class 未知时，JS 在两个 div 之间添加悬停 class。

JS adding hover class between two divs when the class is unknown.

html

javascript

jquery

hover