Jquery Selector works alone but not together

Question

Hi after my first question i have a follow up: both of my selectors works alone but not together... if i want to use both, only the first one works. I use Oracle APEX

 $("[data-id='DataType'].shepherd-button-example-primary").text("11111"); $("[data-id='SearchFilter'].shepherd-button-example-primary").text("44444");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="shepherd-step shepherd-theme-dark shepherd-has-title shepherd-element shepherd-element-attached-top shepherd-target-attached-bottom shepherd-open shepherd-enabled shepherd-pinned shepherd-pinned-right" data-id="DataType"> <div class="shepherd-content"> <header><h3 class="shepherd-title">Data Type</h3></header> <div class="shepherd-text"><p>Choose Your Desired Data Type!</p></div> <footer><ul class="shepherd-buttons"> <li><a class="shepherd-button shepherd-button-secondary">Close</a></li> <li><a class="shepherd-button shepherd-button-example-primary">Next</a></li></ul> </footer> </div> </div> <div class="shepherd-step shepherd-theme-dark shepherd-has-title shepherd-element shepherd-element-attached-middle shepherd-target-attached-middle shepherd-open shepherd-enabled shepherd-abutted shepherd-abutted-left shepherd-element-attached-right shepherd-target-attached-left" data-id="SearchFilter"> <div class="shepherd-content"><header><h3 class="shepherd-title">General Search Filter</h3></header> <div class="shepherd-text"><p>General Search Filters!</p></div> <footer><ul class="shepherd-buttons"> <li><a class="shepherd-button shepherd-button-secondary">Close</a></li> <li><a class="shepherd-button shepherd-button-example-primary">Next</a></li></ul> </footer> </div> </div>

Okay... The Code works, then its maybe an APEX "issue"

Usually I want to run some dynamic actions (Oracle APEX) that will be performed on a click on the selector

Answer 1

You can combine the attribute selectors such that you select all of the buttons which match like so:

$("[data-id='DataType'] .shepherd-button-example-primary, [data-id='SearchFilter'] .shepherd-button-example-primary").text("11111");

That will change the buttons under DataType and SearchFilter to value 11111 .

If you wanted to identify which was clicked you could do:

$("[data-id='DataType'] .shepherd-button-example-primary, [data-id='SearchFilter'] .shepherd-button-example-primary").click(function(){
    switch($(this).closest('.shepherd-step').data('id')) {
        case 'DataType':
            // DataType was clicked
            break
        case 'SearchFilter':
            // SearchFilter was clicked
            break
    }
});

You could make it more dynamic without having to specify DataType or SearchFilter in the selector like so:

$("[data-id] .shepherd-button-example-primary").click(function(){

    var id = $(this).closest('.shepherd-step').data('id');
    console.log(id + ' was clicked') // shows DataType or SearchFilter

});