Question

我目前正在尝试在当前列表（li）中创建一个隐藏字段，我可以在其中传递除文本值之外的其他字段。

这是我到目前为止所做的：

HTML：

<ul id = "playlist" class="mejs-list" style="background: #00BFFF;list-style: none;  padding: 0;list-style-type: none;width: 300px; height: 300px;overflow: auto" >

<li data-leaves="47" class="current">Test</li>
<li data-leaves="47">Test2</li>
</ul>

Javascript（我简化了代码）：

$(".mejs-list li").click(function() {
var audio_src = $(this).text();
alert(audio_src)
var test = $(this).dataset.leaves
alert(test )          
});

我得到＆＃34; audio_src＆＃34;没问题，因为这只是＆＃34;文本＆＃34;但是我不能让自定义字段通过。

有什么想法吗？

Answer 1

jQuery对象没有dataset属性。不要将this“强制转换”为jQuery对象：

$(".mejs-list li").click(function () {
    var audio_src = $(this).text();
    alert(audio_src);
    var test = this.dataset.leaves;
    alert(test);
});

Demo

另请了解如何console.log用于debugging。您可以通过这种方式获得更多信息，您可以将对象记录并检查到控制台。

Answer 2

我认为你应该使用 $（this）.attr（＆＃34; dataset-leaves＆＃34;）而不是 $（this）.dataset.leaves

顺便说一下，最好用半逗号结束每个语句。

更正：应该是 $（this）.attr（＆＃34; data-leaves＆＃34;）

Answer 3

使用jQuery data()返回data-leaves的值。

$('.mejs-list li').click(function() {

    var audio_src = $(this).text(),
        test = $(this).data('leaves');

    alert('audio source: '+ audio_src + '\n data-laves: '+ test);

});

演示：http://jsfiddle.net/pWuh9/

HTML / JS - li额外数据字段

3 个答案: