Simplify / Combine jQuery Snippet

I have 2 small jQuery snippets and would add more similar ones in this kind of rudimentary way ;

$(document).on('click', '.show-listings', function(e) {
    $(".facetwp-radio[data-value=listings]").click();
});
$(document).on('click', '.show-albums', function(e) {
    $(".facetwp-radio[data-value=albums]").click();
});

How can I rewrite this to make it more dynamic such that I could write ‘show-XXX’ where XXX= the value of the [data-value]

All help appreciated.

UPDATE

So the answer provided by @Pinguto worked very well but there is 1 unforseen consequence.

If I add an extra unrelated class, say for styling, like this….

    $(document).on('click', '.show-listings .another-random-class', function(e) {
    $(".facetwp-radio[data-value=listings]").click();
});

.. then I get an error in console as BOTH classes are being ‘detected’ and the code breaks.

How can I limit the scope of the code to only consider the class that has ‘.show-‘ in it?

FIXED

So some of the markup changed in the interim but this solution finally worked…

$(document).on('click', "a[class*='show-']", function(e) {
var c = $(this).attr('class');  // I read the class of the element 
c = c.slice(c.indexOf('show-')) // I delete any classes prior to the desired one 
    .split(' ')[0]              // I delete any classes following the desired one
    .slice('show-'.length);     // I delete the "show-" from the class 
$(".facetwp-facet .label[data-value="+ c +"]").click();  // If the element exists, then it simulates a click on it. 

});

So thank you so much @Pinguto . Greatly appreciated.

ADDITIONAL REQUIREMENT

I wonder can we extend this code to allow for more than 1 ‘show’ class?

That is to say ;

        $(document).on('click', '.show-listings .show-members .another-random-class', function(e) {
    $(".facetwp-radio[data-value=listings]").click();
});

Where now we would have 2 instances of the ‘show-*’ class each triggering a separate ‘click’.

Is that possible?

Answer

I don’t know, but I don’t think it can be made more versatile than that:

$(document).on('click', "div[class^='show-']", function(e) {
    var c = $(this).attr('class').slice('show-'.length);
    $(".facetwp-radio[data-value="+ c +"]").click();
});

With div [class^= ‘show-‘] I select all the elements that have the class that joins show- and then I cut the class to get a substring with the desired text .. πŸ™‚

UPDATE:

You’re right .. actually I hadn’t thought about that eventuality .. πŸ™‚

This is how it should go and I have commented the code, so it will be easier for you to understand how it works and make any changes .. πŸ™‚

$(document).on('click', "div[class*='show-']", function(e) {
    var c = $(this).attr('class');  // I read the class of the element 
    c = c.slice(c.indexOf('show-')) // I delete any classes prior to the desired one 
        .split(' ')[0]              // I delete any classes following the desired one
        .slice('show-'.length);     // I delete the "show-" from the class 
    $(".facetwp-radio[data-value="+ c +"]").click();  // If the element exists, then it simulates a click on it. 
});

A LITTLE NOTE:

the “div[class^=’show-‘]” selector selects all classes that START with “show-“. Example:

<div class="show-me food dog"></div>

the “div[class*=’show-‘]” selector selects all class attributes that CONTAIN the text “show-“. Example:

<div class="food show-me dog"></div>

To avoid conflicts, I would advise you to use the first selector (div[class^=’show-‘]), but not knowing the HTML structure of your page, the much more generic second selector may be more useful.

I don’t know .. you just have to try! πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *