Question

我正在遍历一些代码，以在单击地图标记和弹出窗口时显示它们。当您单击标记时，它会显示带有一些信息的弹出窗口。如果单击另一个标记，它将显示该弹出窗口，但第一个标记弹出窗口仍然保留。

如何设置它，如果您单击另一个标记，它会隐藏所有其他弹出窗口？

这是我的jquery：

$(".feature").click(function(e) {
    e.preventDefault();
    var item = $(this).data('number');
    $('.map-popup[data-number="' + item + '"]').show();
    $('.map-down-arrow[data-number="' + item + '"]').show();
    var title = $('.map-popup-title[data-number="' + item + '"]').text();
    $('#input_2_5').find('option[value="' + title + '"]').attr('selected', true);
});

这是我的代码：

<div class="map-popup" data-number="<?php echo $count; ?>" style="left:<?php echo $coords[0]; ?>;top:<?php echo $coords[1]; ?>;">
    <span class="map-popup-title" data-number="<?php echo $count; ?>"><?php echo $title; ?><br /></span>
    <span class="map-popup-text"><?php echo $desc; ?><br /></span>
    <span class="map-popup-text map-popup-tel"><?php echo $tel; ?><br /></span>
    <span class="map-popup-text map-popup-email"><?php echo $email; ?></span>
</div>
<a href="#" class="feature" data-number="<?php echo $count; ?>" style="left:<?php echo $coords[0]; ?>;top:<?php echo $coords[1]; ?>;" data-title="<?php echo $title; ?>" data-info="<?php echo $desc; ?>">
    <span class="map-down-arrow" data-number="<?php echo $count; ?>">&#9660;</span>
</a>

Answer 1

您可以先隐藏所有弹出窗口，然后再显示特定的弹出窗口，请参见下面的代码

$(".feature").click(function(e) {
    e.preventDefault();
    //hide all other popup first
    $('.map-popup').hide();
    $('.map-down-arrow').hide();

    var item = $(this).data('number');
    $('.map-popup[data-number="' + item + '"]').show();
    $('.map-down-arrow[data-number="' + item + '"]').show();
    var title = $('.map-popup-title[data-number="' + item + '"]').text();
    $('#input_2_5').find('option[value="' + title + '"]').attr('selected', true);
});

Answer 2

您是否有理由不隐藏所有其他弹出窗口？

$(".feature").click(function(e) {
  e.preventDefault();

  $('.map-popup[data-number], .map-down-arrow[data-number]').hide();

  var item = $(this).data('number');
  $('.map-popup[data-number="' + item + '"]').show();
  $('.map-down-arrow[data-number="' + item + '"]').show();
  var title = $('.map-popup-title[data-number="' + item + '"]').text();
  $('#input_2_5').find('option[value="' + title + '"]').attr('selected', true);
});

隐藏除当前弹出窗口外的所有弹出窗口？

2 个答案: