jquery 通过.data()访问HTML数据属性不起作用

ncecgwcz 于 2023-03-17 发布在 jQuery

关注(0)|答案(6)|浏览(147)

点击其中一个选项，我试图从'ul li a'获取数据值，并将其放入下面的按钮，我在这里设置了一个JS小提琴的例子：
https://jsfiddle.net/q5j8z/4/
但似乎不能让它工作

$('ul li a').click(function(e) {
    e.preventDefault();
    var value = $(this).data();
    $('.button').data('value');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul>
    <li><a data-value="50" href="#">Option 1</a></li>
    <li><a data-value="40" href="#">Option 2</a></li>
    <li><a data-value="10" href="#">Option 3</a></li>
</ul>

<a data-value="" class="button" href="">Go</a>

有人有什么想法吗？

jquery

来源：https://stackoverflow.com/questions/16936162/accessing-html-data-attribute-on-click-via-data-doesnt-work

6条答案

按热度按时间

qxgroojn1#

您可以执行以下操作：

$('ul li a').click(function (e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
    console.log($('.button').data('value'));
});

这里，$(this).data('value')用于获取链路的data属性值。
$('.button').data('value', value)用于设置按钮的data属性值。
使用console.log($('.button').data('value'));，您可以检查控制台中正在设置的data值。
FIDDLE DEMO
有关详细信息：-.data() API Documentation

赞(0）回复(0）举报 2023-03-17

j13ufse22#

像这样使用它：

var value = $(this).data('value');

然后：

$('.button').data('value', value);

赞(0）回复(0）举报 2023-03-17

5kgi1eie3#

您实际上没有将值数据分配给按钮。请尝试以下操作：

$('ul li a').click(function(e) {
    e.preventDefault();

    var value = $(this).data();

    // assign the value form the clicked anchor to button value data
    $('.button').data('value', value);

    console.log($('.button').data('value'));
});

赞(0）回复(0）举报 2023-03-17

f0brbegy4#

试试这个：

$('ul li a').click(function(e) {
        e.preventDefault();

        var value = $(this).data('value');

        $('.button').data('value', value);
    });

您可以使用console.log查看按钮的值，并使用以下命令进入控制台：

console.log('data: '+$(".button").data("value"));

赞(0）回复(0）举报 2023-03-17

jutyujz05#

首先，你是要插入变量value的值还是“值”字面值？
data()的使用方式与attr('attr-name', attr_value)类似，如下所示：

$('ul li a').click(function(e) {
    e.preventDefault();  
    var value = $(this).data('value');
    $('.button').data('value', value);
});

上面的作品在你的小提琴。

赞(0）回复(0）举报 2023-03-17

t1rydlwq6#

您不需要指定数据前缀，因为jQuery会自动指定.
因此，请确保为值使用正确的属性，如下所示：

$('ul li a').click(function(e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
});

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 通过.data()访问HTML数据属性不起作用

6条答案

相关问题

热门标签

最新问答