Jquery 选择器单独工作但不能一起工作

Question

嗨，在我的第一个问题之后，我有一个跟进：我的两个选择器单独工作但不能一起工作......如果我想同时使用两者，只有第一个工作。 我使用 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>

好的......代码有效，那么它可能是一个 APEX“问题”

通常我想运行一些动态操作（Oracle APEX），这些操作将在单击选择器时执行

Answer 1

您可以组合属性选择器，这样您 select 所有匹配的按钮如下所示：

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

这会将 DataType 和 SearchFilter 下的按钮更改为值11111 。

如果你想确定哪个被点击了，你可以这样做：

$("[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
    }
});

您可以使其更具动态性，而不必像这样在选择器中指定 DataType 或 SearchFilter：

$("[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

});