jquery - 许多类的jquery代码，map-1，map-2

Question

我希望这个 jQuery 代码适用于许多地图，例如 for .map-1, .map-2, .map-3.

HTML：

<div class="view-map" id="view-map">View Map</div>
<div class="map-1">
<div id="close" class="close-btn"></div>
</div>

<div class="view-map" id="view-map">View Map</div>
<div class="map-2">
<div id="close" class="close-btn"></div>
</div>

jQuery :

//when click on search toggle input
$("#view-map").click(function(){
    $(".map" + $(this).parent().attr("class")).css( "display", "block" );
  });

$("#close").click(function (event) {
    $(".map" + $(this).parent().attr("class")).hide();
});

Answer 1

您确定要为此使用 CSS 类吗？如果它是唯一的，为什么不把它变成一个 ID 呢？

Anywho，您可以像这样链接选择器：

$(".map-1, .map-2")

或者，如果您使用的是 ID：

$("#map-1, #map-2")

Answer 2

基于类调用函数

//when click on search toggle input
$(".view-map").click(function(){
   ...
  });

$(".close-btn").click(function (event) {
    ...
});

Answer 3

ID 必须是唯一的！检查此代码：

使用包装器 div 找到正确的地图以显示 onclick！

<div class="map-wrapper">
   <div class="view-map" id="view-map1">View Map</div>
   <div class="map" id="map-1">
      <div class="close"></div>
   </div>
</div>

<div class="map-wrapper">
   <div class="view-map" id="view-map2">View Map</div>
   <div class="map" id="map-2">
      <div class="close"></div>
   </div>
</div>

Javascript：

使用show()andhide()而不是你的方法。找到作为包装器的父级并查找要显示或隐藏的子图！

//when click on search toggle input
$(".view-map").click(function() {
    $(this).parent(".map-wrapper").children('.map').show();
  });

$(".close").click(function() {
    $(this).parent(".map-wrapper").children('.map').hide();
});

Answer 4

Do like this $('.map-1 .map-2 .map-3') and it should work.

But it is advisable to use unique ID such as map1, map2, map3. In this case you can use wild card selector of jquery.

For ex: $("[id^=map]"), now this will work for all the ID's having 'map'

Answer 5

你应该像这样对所有地图使用相同的类

html

<div class="map map-1">
<div id="close" class="close-btn"></div>
</div>

<div class="view-map" id="view-map">View Map</div>
<div class="map map-2">
<div id="close" class="close-btn"></div>

jQuery

$("#view-map").click(function(){
    $(".map").css( "display", "block" );
});