jquery 属性选择器不适用于数据属性

Posted 2023-05-09

【中文标题】jquery 属性选择器不适用于数据属性

【英文标题】：jquery attribute selector is not working for data-attribute

【发布时间】：2020-11-07 02:04:16

【问题描述】：

我知道它可能与 SO 问题重复 Selecting element by data attribute 和 jQuery how to find an element based on a data-attribute value?

但我仍然无法选择存在属性“数据值”的所有元素。

问题： 我期待声明 B) $('[data-value]') 或 $('*[data-value]*') 应该返回所有元素 具有数据属性“数据值”，但它什么也不返回。

但是声明 A) $('#openingBalAccount').data('value') 得到结果“ACC-2”。

如果上面的语句 A 有效，那么语句 B 也应该有效，但它没有发生。

下面是相同的 Chrome 开发工具屏幕，将屏幕中的前 2 个语句视为上面的语句 A，其余为语句 B。如上所述，如果语句 A 有效，则语句 B 也应该有效。

开发工具示例应该足以识别任何问题，但如果您仍然坚持要代码，这里就是。

Jquery 语句设置数据值

$('#accountsModalSelect').on('click', function onAccountsModalSelect() 
    let rowData = $('#accountsModalSelect').data('selected')
    if (rowData) $('.accountSource').val(rowData.description).data('value', rowData.account)
    $('#accountsModal').modal('hide')
)

pug 格式的 HTML 代码

                    form#openingBalForm
                        input.form-control#openingBalUpdateType(type='hidden')
                        input.form-control#formtab(type='hidden' value='openingbaltab')
                        .row.form-group
                            .col-4
                                labal(for='openingBalFinYear') Financial Year
                            .col
                                input.form-control#openingBalFinYear(name='openingBalFinYear' type='text' )
                        .row.form-group
                            .col-4
                                labal(for='openingBalAccount') Account
                            .col
                                .input-group
                                    input.form-control.accountSource#openingBalAccount(name='openingBalAccount' type='text' )
                                    .input-group-append#openingBalAccountSearch
                                        .input-group-text
                                            .fas.fa-search
                        .row.form-group
                            .col-4
                                labal(for='openingBalAmount')  Amount
                            .col
                                input.form-control#openingBalAmount(name='openingBalAmount' type='number')

【问题讨论】：

如果它不在您的 html 中，那么 jQuery 的 .data() 将不会设置 HTML data-* 属性。它只会存储数据。如果要设置data-*属性，则需要.attr('data-whatever', '12345');

如上，换一种说法：$().data("key", "value") 会将该值 在内部 存储到 jquery，它不会改变你的 HTML，所以寻找 $("[data-key=value]") 不会找到它.如果有其他选择器选项，您可以使用 .filter，例如 $(".class").filter(function() $(this).data("key") == "value"; )

@NiettheDarkAbsol - 谢谢它确实有效，根据你的建议，我将它包含在 html 中，pug html 现在看起来像 (name='openingBalAccount' type='text' data-value='')

【参考方案1】：

如果你想做这样的事情，你还必须为元素添加 html 属性。您无法访问内部存储的数据。

$('#accountsModalSelect').on('click', function onAccountsModalSelect() 
    let rowData = $('#accountsModalSelect').data('selected')
    if (rowData) 
        $('.accountSource')
            .val(rowData.description)
            .data('value', rowData.account)
            .attr('data-value', rowData.account) // Add this
    
    $('#accountsModal').modal('hide')
)

【讨论】：

谢谢 - 它确实有效，添加到 html 代码中，如 (name='openingBalAccount' type='text' data-value='')