Question

我希望这个jQuery代码可用于许多地图，例如适用于.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()和hide()代替您的方法。找到作为包装器的父级，并查找要显示或隐藏的子映射！

//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

这样做$('.map-1 .map-2 .map-3')它应该有效。

但建议使用ID之类的唯一map1, map2, map3。在这种情况下，您可以使用jquery的通配符选择器。

对于例如：$("[id^=map]")，现在这适用于所有具有“地图”的ID

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

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

5 个答案: