I have 2 jQuery snippets that perform related things.
The first is this.
$(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.
});
The effect of this code is to take the 'sliced' class of a clicked element and find another element with a matching class and click it.
The second jQuery snippet is this.
$(".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();
});
This snippet acts on the javascript engine of the plugin FacetWP for Wordpress and in effect it has the effect of clearing all facets and then making a pre defined selection from a single facet. In this case it selects the option 'welcome' from the facet 'chapter'.
So I need to ad the same kind of dynamic quality to this second snippet. It might look something like this...
$(".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();
});
Can anyone tell me how I might achieve this? Many thanks.
OUTCOME
So in trying code provided by @Reflective I am finding that FacetWP is reacting twice to the click. That's the only way I have to describe it. Please see images attached.
My clickable element has the classes .chapter .show-designs-four-a
CodePudding user response:
EDIT: Second part included!
$(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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>