Question

我正在制作交互式SVG世界地图。每个国家/地区都有一个称为数据码的属性，并以国家/地区代码作为其值。例如。：俄罗斯：<path data-code="RU"></path> 日本<path data-code="JP"></path> 法国<path data-code="FR"></path>

每当我单击一个国家/地区时，我都希望隐藏一个包含信息的div。该div具有对应于国家/地区代码的类。例如：

<div class="RU"></div>
<div class="JP"></div>
<div class="FR"></div>

我写了下面的代码来做到这一点：

$('path[data-code=RU"]').click(function() {
   $(".RU").fadeIn();
});
$('path[data-code="JP"]').click(function() {
   $(".JP").fadeIn();
}); 
$('path[data-code="FR"]').click(function() {
   $(".FR").fadeIn();
});

但是，我想避免为每个国家/地区编写此类代码。有没有一种方法，每当我单击一个国家/地区时，都会显示具有匹配国家/地区代码的div？

Answer 1

您可以使用Gradle sync failed - Failed to resolve: appcompat-v7:26附加事件处理程序，并使用has attribute selector方法可以获取的属性值获取目标元素

$('path[data-code]').click(function() {
   $("." + $(this).data('code')).fadeIn();
});

Answer 2

您可以将单击添加到所有具有数据代码属性的元素。然后在点击功能内，您可以获得相应的国家/地区。

$('path[data-code]').click(function() {
  let country = $(this).data('code');
  $('path[data-code]').fadeOut(); // Here i added a way to fade out already active items
  $('.' + country).fadeIn();
});

如何显示具有与cliked元素的属性匹配的类的div？

2 个答案: