使用2个data-属性来定位HTML元素

Question

我在定位具有2个数据元素的div时遇到问题。 这是代码片段：

    <button data-button="inventoryb" data-name="overview" style="width:120px">Overview</button>
    <button data-button="inventoryb" data-name="schedule" style="width:120px">Schedule</button>
    <button data-button="inventoryb" data-name="plan" style="width:120px">Inventory Plan</button>
    <button data-button="inventoryb" data-name="atl" style="width:120px">Inventory ATL</button>

您能帮我使用JQuery定位一个按钮吗？ 我已经试过了

$("button[data-button='inventoryb']").find("button[data-name='overview']").click();

但它似乎不起作用。

在此先感谢您，如果我发重复的问题，则对不起。 我找不到与我类似的问题。

编辑：我想在搜索中同时拥有两个data-属性，就像在我的另一个代码中一样，有一个类似的结构：

    <button data-button="taskb" data-name="overview" style="width:120px">Overview</button>
    <button data-button="taskb" data-name="list" style="width:120px">Schedule</button>

因此，仅按数据名称搜索不足以定位右键

Answer 1

$("button[data-button=inventoryb][data-name=overview]").click()

Answer 2

如果您要查找具有data-button属性且data-name不同的按钮，则可以这样做，

$( "button[data-button][data-name='list']" ).click();

注意：这只是建议。

---

你可以这样使用多个属性选择器

$( "button[data-button='inventoryb'][data-name='overview']" ).click();

阅读有关此内容的更多信息： 多个属性选择器[name =“ value”] [name2 =“ value2”]

Answer 3

在attr（）中指定属性名称和值。 会的

方法1：

$("button[data-button='inventoryb']").attr("data-name","overview").click();

或者，您也可以嵌套调用attr（）

方法2：

$("button").attr("data-button", "inventoryb").attr("data-name","overview").click();

注意：现在有一个问题。 根据我的代码，将为所有具有

data-button ='inventoryb' 或 data-name ='overview'

但是，如果您只想为同时具有两个按钮的按钮触发click事件，该怎么办

data-button ='inventoryb' 和 data-name ='overview'

然后，我建议使用嵌套选择器选项，该选项已经为许多人所解答。 还在这里演示

$("button[data-button='inventoryb'][data-name='schedule']").click();

工作小提琴

Answer 4

$("button [data-button='inventoryb'][data-name='overview']").click();