Question

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

选择时间和地点后，我需要运行触发点击的操作：jQuery.fn.almTriggerClick();

加载内容的代码有一些meta_values，我每次单击时都会从多边形和时间按钮中获取这些元数据。

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

我写了下面的内容，但我无法理解它的问题。

按钮单击也必须有自己的功能，而我为多边形生成的单击必须有自己的功能。按钮和多边形每次都必须添加/删除.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的元素

Answer 1

解决：

var mapClick = false;
var btnClick = false;
var date;
var loc;

jQuery("button").on("click", function(b) {

    if(jQuery(".panel_block").is(":visible")){
        jQuery(".panel_block").hide();
    }; 

    date = jQuery(this).attr("class");

    if(mapClick == true) {
        mapClick = false;
        var $shortCode = '<?php echo do_shortcode("[ajax_load_more post_type='post' pause='true' meta_key='country:year' meta_value='Nicaragua:1200' meta_compare='IN:IN' meta_type='CHAR:CHAR' meta_relation='AND' button_label='SPIMEING']"); ?>'

        $('.panel_block').html($shortCode);

        jQuery(".panel_block").show(function(){
            jQuery(".ajax-load-more-wrap ul").attr("data-meta-value", loc + ":" + date);

        });

        setTimeout(
            function() {
                if ($(".ajax-load-more-wrap").length){
                    $(".ajax-load-more-wrap").ajaxloadmore();
                    $.fn.almTriggerClick();
                }
        }, 500);

    } else {
        jQuery("#map ." + date).attr("class", "active leaflet-interactive "  + date);
        btnClick = true;
    }
});

function panelShow(e) {
    jQuery("#map .active").removeClass("active");
    this.getElement().classList.add('active');

    if(jQuery(".panel_block").is(":visible")){
        jQuery(".panel_block").hide();
    };

    loc = e.target.feature.properties.name;

    if(btnClick == true) {
        btnClick = false;
        var $shortCode = '<?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']"); ?>'

        $('.panel_block').html($shortCode);

        this.getElement().classList.add('active');
        jQuery(".panel_block").show(function(){
            jQuery(".ajax-load-more-wrap ul").attr("data-meta-value", loc + ":" + date);

        });

        setTimeout(
            function() {
                if ($(".ajax-load-more-wrap").length){
                    $(".ajax-load-more-wrap").ajaxloadmore();
                    $.fn.almTriggerClick();
                }
        }, 500);

    } else {
        mapClick = true;
    }
}

切换具有不同html元素的类

1 个答案: