0

我有以下代码：

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);

对于两个结果 div，我希望它们的内容是Result1:Test.Test1.Test2.和Result2:Test.Test1.Test2.

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

为什么是这样？

示例小提琴

4

6 回答 6

2

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

可以修复和简化：

 var testId1 = this.id ? this.id : test.data('id');
于 2013-09-12T15:30:50.270 回答
1

问题在于第三个元素，即使id属性不存在this.id也不undefined是空字符串。因此，对于第三个元素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);

演示：小提琴

于 2013-09-12T15:25:58.930 回答
1

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

因此，条件typeof this.id !== "undefined"始终为真，因此两个字段始终仅this.id具有值。

您应该尝试以下方式：

var test = $(this),
    testId1 = (this.id !== "" ? this.id : test.data('id')),
    testId2 = (this.id !== "" ? this.id : '');
于 2013-09-12T15:30:03.617 回答
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/

于 2013-09-12T15:27:39.653 回答
-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>

这将为您提供您正在寻找的前哨。

于 2013-09-12T15:27:07.147 回答
-2

修改这一行。

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

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

提琴手

于 2013-09-12T15:29:25.147 回答