Question

晚上全部。尝试使用编写的脚本来显示/隐藏Google Map的标记。问题是我需要为每个单击函数添加一个活动类，但是当下一个单击事件发生时将其删除。我已经尝试过在阳光下的每一个组合，但我似乎无法让它发挥作用。

这是jQuery：

$(document).ready(function() {
  $(".category-header").each(function() {
    $(this).click(function() {
        showCategory($(this).text(), $(this).parent().addClass("active").attr("zoom"));
    })
  })
  $(".map-item").each(function() {
    $(this).click(function() {
        getMarker($(this).text(), $(this).addClass("active").attr('zoom'));
    })
  })
})

function showCategory(category, zoom) {
  category = String(category).toLowerCase();
  infowindow.close();
  $(".map-items-container").not($("#" + category + "-container .map-items-container")).slideUp();
  target = $(".map-category").has('.category-header:contains("' + category + '")');
  target.find($(".map-items-container")).slideDown();   
  var LatLngList = new Array (homemarker.getPosition());    
  for (var i=0; i<allMarkers.length; i++) {
    if (allMarkers[i].category == category) {
        allMarkers[i].setVisible(true);
        LatLngList.push(allMarkers[i].getPosition());
    } else {
        allMarkers[i].setVisible(false);
    }
  }

HTML：

    <div id="community-map-container">

<div id="map-canvas"></div>

<div id="map-container">
    <div id="map-container-content">

        <div id="restaurants-container" class="map-category">
            <h2><span class="category-header">restaurants</span> & Cafes</h2>
            <div class="map-items-container">
                <div class="map-item" category="restaurants" lng="-123.368063" lat="48.424835">Bard & Banker</div>
            </div><!-- map-items-container -->
        </div><!-- category -->

        <div id="everyday-container" class="map-category">
            <h2><span class="category-header">everyday</span> needs</h2>
            <div class="map-items-container">
                <div class="map-item" category="everyday" lng="-123.366734" lat="48.427385">Fish Hair Salon</div>
            </div><!-- map-items-container -->
        </div><!-- category -->

        <div id="recreation-container" class="map-category">
            <h2 class="category-header">recreation</h2>
            <div class="map-items-container">
            </div><!-- map-items-container -->
        </div><!-- category -->

        <div id="shopping-container" class="map-category">
            <h2 class="category-header">shopping</h2>
            <div class="map-items-container">
                <div class="map-item" category="shopping" lng="-123.368261" lat="48.427693">American Apparel</div>
            </div><!-- map-items-container -->
        </div><!-- category -->

    </div><!-- map-container-content -->
</div><!-- map-container -->

    </div>

非常感谢任何帮助。为了记录，我尝试了toggleClass和removeClass，但似乎无法使它与此脚本保持一致。

Answer 1

我在评论中删除了像安东所说的.each()。

然后我将适当的removeClass("active")添加到可能使该类处于活动状态但不再存在的所有元素中。

$(".category-header").click(function() {
    $(".category-header").parents().removeClass("active");
    showCategory($(this).text(), $(this).parent().addClass("active").attr("zoom"));
})


$(".map-item").click(function() {
    $(".map-item").removeClass("active");
    getMarker($(this).text(), $(this).addClass("active").attr('zoom'));
})

可以添加活动类，但似乎无法通过下一个单击功能将其删除

1 个答案: