jQuery数据属性不起作用

时间:2013-09-12 15:19:27

标签: jquery custom-data-attribute

我有以下代码:

HTML

<div id="Test" class="test">test</div>
<div id="Test1" class="test">test</div>
<div data-id="Test2" class="test">test</div>
<br />
<div id="result1"></div>
<div id="result2"></div>

的jQuery

var result1 = 'Result1:',
    result2 = 'Result2:';

$('.test').each(function () {
    var test = $(this),
        testId1 = (typeof this.id !== "undefined" ? this.id : test.data('id')),
        testId2 = (typeof this.id !== "undefined" ? this.id : '');

    if (testId2 == '') {
        testId2 = test.data('id');
    }

    result1 += testId1 + '.';
    result2 += testId2 + '.';
});

$('#result1').html(result1);
$('#result2').html(result2);

对于两个结果分组,我希望其内容为Result1:Test.Test1.Test2.Result2:Test.Test1.Test2.

然而,第一个结果div的内容为Result1:Test.Test1..

为什么会这样?

Example fiddle

6 个答案:

答案 0 :(得分:2)

如果元素没有id,则element.id返回一个空字符串,而不是未定义。

可以修复和简化:

 var testId1 = this.id ? this.id : test.data('id');

答案 1 :(得分:1)

问题在于第3个元素,即使id属性不存在,this.id不是undefined,它也是空字符串。因此,对于第3个元素test1获取一个空字符串作为值,但对于test2,以下if条件会使用id数据值更新该值。

一种可能的解决方案是测试id属性的长度,而不是检查它是否已定义

var result1 = 'Result1:',
    result2 = 'Result2:';
$('.test').each(function () {
    var test = $(this),
        testId1 = ($.trim(this.id || '').length ? this.id : test.data('id')),
        testId2 = (this.id !== undefined ? this.id : '');

    if (testId2 == '') {
        testId2 = test.data('id');
    }

    result1 += testId1 + '.';
    result2 += testId2 + '.';
});

$('#result1').html(result1);
$('#result2').html(result2);

演示:Fiddle

答案 2 :(得分:1)

问题是因为typeof this.id即使没有设置值,也是string

因此,条件typeof this.id !== "undefined"始终为true,因此两个字段始终只有this.id作为值。

你应该尝试以下方式:

var test = $(this),
    testId1 = (this.id !== "" ? this.id : test.data('id')),
    testId2 = (this.id !== "" ? this.id : '');

答案 3 :(得分:0)

试试这个,

var result1 = 'Result1:',
    result2 = 'Result2:';
$('.test').each(function () {
    var test = $(this),
        testId1 = (test.attr('id')!=undefined ? test.attr('id') : test.data('id')),
        testId2 = (test.attr('id')!=undefined ? test.attr('id') : '');
    if (testId2 == '') {
        testId2 = test.data('id');
    }
    result1 += testId1 + '.';
    result2 += testId2 + '.';
});

$('#result1').html(result1);
$('#result2').html(result2);

小提琴 http://jsfiddle.net/WaJ5n/3/

答案 4 :(得分:-2)

你的错误是html代码,id =“Test2”需要有id标签而不是data-id =“Test2”

<div id="Test" class="test">test</div>
<div id="Test1" class="test">test</div>
<div **id="Test2"** class="test">test</div>
<br />
<div id="result1"></div>
<div id="result2"></div>

这将为您提供您正在寻找的外出。

答案 5 :(得分:-2)

修改此行。

<div data-id="Test2" class="test">test</div> to

<div id="Test2" class="test">test</div>

<强> JsFiddle