-1

.map-1この jQuery コードを、 、.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();
});
4

5 に答える 5

1

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()andを使用してください。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();
});
于 2013-08-27T11:11:57.277 に答える