用不同的html元素切换类

我有两种类型的交互:一种是指定时间的按钮，另一种是地图上的多边形。我需要能够点击一个多边形，然后选择时间，并显示其相对结果，反之亦然，点击一个时间按钮，然后在一个多边形，并获得其相对结果。

在选择时间和地点之后，我需要运行一个触发点击的动作:jQuery.fn.almTriggerClick();

加载内容的代码有一些meta_values，我每次点击时都从多边形和时间按钮中获得这些值。

我还需要做正确的交互的可能性，但如果我点击面板外的内容加载，面板隐藏和内容消失，并再次运行不同的按钮和多边形交互的逻辑。

我写了下面的东西，但是我不明白，它有bug。

按钮点击必须有自己的功能，而点击我生成的多边形必须有自己的。按钮和多边形每次都必须添加/删除一个.active class。

这是我得到的:

// Simplified HTML:
<button type="button" class="1600">1600</button>
<button type="button" class="1500">1500</button>
<div id="map">
   <path class=""></path>
   <path class=""></path>
</div>
// Set the initial vars
var mapClick = false;
var btnClick = false;
var date;
// JS for the buttons logic:
jQuery("button").on("click", function(b) {
    if(jQuery(".panel_block").is(":visible")){
        jQuery("#map .active").removeAttr("class", "active");
        jQuery(".panel_block").hide();
        jQuery("#ajax-load-more ul").empty().attr("data-meta-value", " ");
    }; 
    date = jQuery(this).attr("class");
    if(mapClick == true) {
        jQuery("#ajax-load-more ul").attr("data-meta-value", loc + ":" + date);
        jQuery(".panel_block").show();
        jQuery.fn.almTriggerClick();
    } else {
        jQuery("#map .active").removeAttr("class", "active");
        jQuery("#map ." + date).attr("class", "active leaflet-interactive "  + date);
        btnClick = true;
        alert("Choose location");
    }
});
//JS to handle the polygons logic
var loc;
function panelShow(e) {
    if(jQuery(".panel_block").is(":visible")){
        jQuery("#map .active").removeAttr("class", "active");
        jQuery(".panel_block").hide();
        jQuery("#ajax-load-more ul").empty().attr("data-meta-value", " ");
    };
    loc = e.target.feature.properties.name;
    jQuery("#ajax-load-more ul").attr("data-meta-value", loc + ":" + date);
    this.getElement().classList.add('active');
    if(btnClick == true) {
        jQuery(".panel_block").show();
        jQuery.fn.almTriggerClick();
    } else {
        alert("Choose time");
        mapClick = true;
    }
}
 //JS for the polygon click:
function onEachFeature(feature, layer) {
    layer.on({
        click: panelShow
    });
}

每次替换的元值:

<div class="panel_block">
    <?php echo do_shortcode('[ajax_load_more post_type="post" pause="true" meta_key="country:year" meta_value="LOCATION:TIME" meta_compare="IN:IN" meta_type="CHAR:CHAR" meta_relation="AND" button_label="SPIMEING"]'); ?>
</div>

上面的输出:

<ul id ="ajax-load-more" data-meta-value="LOCATION:TIME"></..

注意: ID #ajax-load-more附加到我从php函数获得的html输出，这是我将改变meta_values