合并 2 jQuery 个片段的功能
Merge functionality from 2 jQuery snippets
我有 2 个 jQuery 片段执行相关的事情。
第一个是这个
$(document).on('click', "[class*='fs-']", function(e) {
var c = $(this).attr('class'); // I read the class of the element
c = c.slice(c.indexOf('fs-')) // I delete any classes prior to the desired one
.split(' ')[0] // I delete any classes following the desired one
.slice('fs-'.length); // I delete the "fs" from the class
$("[data-value="+ c +"]").click(); // If the element exists, then it simulates a click on it.
});
这段代码的作用是取一个被点击的元素的'sliced' class,找到另一个匹配的class的元素,然后点击
第二个 jQuery 片段是这样的。
$(".show-welcome").click(function () {
$.each(FWP.facets, function(name, val) {FWP.facets[name] = [];}); /* clear all */
FWP.facets['chapter'] = ['welcome']; /* make selection */
FWP.is_reset = true; // don't parse facets
FWP.refresh();
});
此代码段作用于 Wordpress 插件 FacetWP 的 javascript 引擎,实际上它具有清除所有方面然后从单个方面进行预定义选择的效果。在本例中,它从 'chapter'.
方面选择选项 'welcome'
所以我需要为第二个片段添加同样的动态质量。它可能看起来像这样...
$(".show-XXX").click(function () {
$.each(FWP.facets, function(name, val) {FWP.facets[name] = [];}); /* clear all */
FWP.facets['chapter'] = ["the clicked element less the 'show-' part"]; /* make selection */
FWP.is_reset = true; // don't parse facets
FWP.refresh();
});
谁能告诉我如何实现这一目标?非常感谢。
结果
因此,在尝试@Reflective 提供的代码时,我发现 FacetWP 对点击有两次反应。这是我必须描述它的唯一方式。请参阅所附图片。
我的可点击元素有 classes .chapter .show-designs-four-a
编辑:包括第二部分!
$(function(){
$(document).on('click', "[class*='fs-']", function(e) {
// getting all classes and converting them to an array
Array.from($(this).prop('classList'))
// filtering non 'fs-' classes
.filter(x => x.match(/^fs-/))
// stripping leading `fs-`
.map( x => {
const [a,b] = x.match(/^fs-(\w+)/i);
return b;
// clicking all elements having data atribute matching the fs- classes from the collection
}).forEach( x => {
console.log(x);
$("[data-value='${x}']").click();
});
});
var FWP = {
facets: {chapter:[]},
is_reset: false,
refresh: function() {}
};
$(".chapter").click(function () {
/* clear all */
$.each(FWP.facets, function(name, val) {FWP.facets[name] = [];});
var [chapter] = Array.from($(this).prop('classList'))
// filtering non 'show-' classes
.filter(x => x.match(/^show-/))
// stripping leading `show-`
.map( x => {
const [a,b] = x.match(/^show-(\w+)/i);
return b;
});
/* make selection */
FWP.facets['chapter'] = [chapter];
FWP.is_reset = true; // don't parse facets
FWP.refresh();
console.log(FWP);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element" class="fs-one fs-two fs-three other1 other2">Click here</div>
<hr/>
Second part (click some of the entries)
<hr/>
<div class="chapter show-book">Book</div>
<div class="chapter show-window">Window</div>
<div class="chapter show-chair">Chair</div>
我有 2 个 jQuery 片段执行相关的事情。
第一个是这个
$(document).on('click', "[class*='fs-']", function(e) {
var c = $(this).attr('class'); // I read the class of the element
c = c.slice(c.indexOf('fs-')) // I delete any classes prior to the desired one
.split(' ')[0] // I delete any classes following the desired one
.slice('fs-'.length); // I delete the "fs" from the class
$("[data-value="+ c +"]").click(); // If the element exists, then it simulates a click on it.
});
这段代码的作用是取一个被点击的元素的'sliced' class,找到另一个匹配的class的元素,然后点击
第二个 jQuery 片段是这样的。
$(".show-welcome").click(function () {
$.each(FWP.facets, function(name, val) {FWP.facets[name] = [];}); /* clear all */
FWP.facets['chapter'] = ['welcome']; /* make selection */
FWP.is_reset = true; // don't parse facets
FWP.refresh();
});
此代码段作用于 Wordpress 插件 FacetWP 的 javascript 引擎,实际上它具有清除所有方面然后从单个方面进行预定义选择的效果。在本例中,它从 'chapter'.
方面选择选项 'welcome'所以我需要为第二个片段添加同样的动态质量。它可能看起来像这样...
$(".show-XXX").click(function () {
$.each(FWP.facets, function(name, val) {FWP.facets[name] = [];}); /* clear all */
FWP.facets['chapter'] = ["the clicked element less the 'show-' part"]; /* make selection */
FWP.is_reset = true; // don't parse facets
FWP.refresh();
});
谁能告诉我如何实现这一目标?非常感谢。
结果
因此,在尝试@Reflective 提供的代码时,我发现 FacetWP 对点击有两次反应。这是我必须描述它的唯一方式。请参阅所附图片。
我的可点击元素有 classes .chapter .show-designs-four-a
编辑:包括第二部分!
$(function(){
$(document).on('click', "[class*='fs-']", function(e) {
// getting all classes and converting them to an array
Array.from($(this).prop('classList'))
// filtering non 'fs-' classes
.filter(x => x.match(/^fs-/))
// stripping leading `fs-`
.map( x => {
const [a,b] = x.match(/^fs-(\w+)/i);
return b;
// clicking all elements having data atribute matching the fs- classes from the collection
}).forEach( x => {
console.log(x);
$("[data-value='${x}']").click();
});
});
var FWP = {
facets: {chapter:[]},
is_reset: false,
refresh: function() {}
};
$(".chapter").click(function () {
/* clear all */
$.each(FWP.facets, function(name, val) {FWP.facets[name] = [];});
var [chapter] = Array.from($(this).prop('classList'))
// filtering non 'show-' classes
.filter(x => x.match(/^show-/))
// stripping leading `show-`
.map( x => {
const [a,b] = x.match(/^show-(\w+)/i);
return b;
});
/* make selection */
FWP.facets['chapter'] = [chapter];
FWP.is_reset = true; // don't parse facets
FWP.refresh();
console.log(FWP);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element" class="fs-one fs-two fs-three other1 other2">Click here</div>
<hr/>
Second part (click some of the entries)
<hr/>
<div class="chapter show-book">Book</div>
<div class="chapter show-window">Window</div>
<div class="chapter show-chair">Chair</div>