【发布时间】：2020-08-19 06:48:32
【问题描述】：
该网站有一个产品过滤器（WordPress+WC），有一个小脚本，当您选择一个过滤器时，它会显示一个带有“显示”按钮的 div 块。我需要在最后选择的过滤器附近显示 div 块。
此代码有效，但它会根据其在 DOM 中的位置显示最后选择的选项（过滤器），即如果您先选择最后一个过滤器，然后选择第一个过滤器，它将在最后一个旁边显示 div，而不是第一个选项。如果按顺序从上到下选择过滤器，则其工作正常
也试过这样的：
var latest_value = jQuery('[class ^= woof_checkbox_term]:checkbox:checked:last').val();
//console.log(latest_value);
结果一模一样
jQuery("[class ^= woof_term_]").click(function() {
var arr = jQuery.map(jQuery('[class ^= woof_term_] input:checkbox:checked'), function(e, i) {
return +e.value;
});
//console.log(arr);
function unique(list) {
var result = [];
jQuery.each(list, function(i, e) {
if (jQuery.inArray(e, result) == -1) result.push(e);
});
return result;
}
document.querySelectorAll("#submit-filter").forEach(el => el.remove());
var asd = jQuery('#woof_results_by_ajax').find('p.woocommerce-result-count').text().replace(/[^0-9]/gi, '');
if (asd === '' || asd === null) {
jQuery('<div id="submit-filter"><span id="total-filter-count">One product</span><input type="submit" name="gofilter" class="button_filter" value="Show"></div>').insertAfter('.woof_term_' + unique(arr).slice(-1)[0]);
} else {
jQuery('<div id="submit-filter"><span id="total-filter-count">Selected: <b>' + parseInt(asd) + '</b></span><input type="submit" name="gofilter" class="button_filter" value="Show"></div>').insertAfter('.woof_term_' + unique(arr).slice(-1)[0]);
}
jQuery(".button_filter").on('click', function(event) {
jQuery('html, body').animate({
scrollTop: jQuery("h1.woocommerce-products-header__title").offset().top
}, 1000)
document.querySelectorAll("#submit-filter").forEach(el => el.remove());
});
});div#submit-filter {
position: absolute;
width: 126px;
height: 67px;
left: 180px;
line-height: 20px;
font-size: 12px;
text-align: center;
z-index: 99;
/*margin-top: -1px;*/
margin-top: -14px;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
-khtml-border-radius: 0 5px 5px 5px;
background-color: #fff;
border: 2px solid #2c3d52;
color: #2c3d52;
}
input.button_filter {
border: none;
width: auto;
height: 27px;
text-align: center;
color: #fff;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
text-shadow: none;
padding: 0 10px;
display: inline-block;
line-height: 27px;
text-decoration: none;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-khtml-box-sizing: content-box;
position: relative;
overflow: visible;
outline: none;
cursor: pointer;
-webkit-appearance: none;
background: #2c3d52;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-khtml-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="woof_term_1105 "><input type="checkbox" id="woof_1105_5f3a448442426" class="woof_checkbox_term woof_checkbox_term_1105" data-tax="type1" name="type1_f2" data-term-id="1105" value="1105"><label class="woof_checkbox_label" for="woof_1105_5f3a448442426">Filter 1<span class="woof_checkbox_count">(1)</span></label>
<input type="hidden" value="filter1" data-anchor="woof_filter-1">
</li>
<li class="woof_term_1114 "><input type="checkbox" id="woof_1114_5f3a448442d64" class="woof_checkbox_term woof_checkbox_term_1114" data-tax="type1" name="type1_f2" data-term-id="1114" value="1114"><label class="woof_checkbox_label " for="woof_1114_5f3a448442d64">Filter 2<span class="woof_checkbox_count">(0)</span></label>
<input type="hidden" value="filter2" data-anchor="woof_filter-2">
</li>
<li class="woof_term_1118 "><input type="checkbox" id="woof_1118_5f3a448448ce7" class="woof_checkbox_term woof_checkbox_term_1118" data-tax="type2" name="type2_f2" data-term-id="1118" value="1118"><label class="woof_checkbox_label " for="woof_1118_5f3a448448ce7">Filter 3<span class="woof_checkbox_count">(1)</span></label>
<input type="hidden" value="filter3" data-anchor="woof_filter-3">
</li>
</ul>【问题讨论】：
-
这没有意义：
document.querySelectorAll("#submit-filter").forEach(el => el.remove());- ID 必须是唯一的并且你有 jQuery 所以$("#submit-filter").remove();就足够了 -
我给你做了一个sn-p。请使用相关插件和 CSS 将其设为 minimal reproducible example
-
@mplungjan 完成，可以检查
标签： javascript html jquery dom