val（）实际上包含一个值时显示空字符串

Question

在chrome的开发人员工具中，我生成的代码如下所示：

<tbody>
    <tr>
        <td>
            <span class="LiveAgentStatusField" value="Online" >
                Online
            </span>
        </td>
    </tr>
</tbody>

请注意，此html代码是由salesforce生成的，除了跨度之外，我对此没有太多控制权。

我的jQuery代码：

$(".LiveAgentStatusField").each(function(index) {
    if ($(this).val() === 'online' || $(this).val() === 'Online') {
        $(this).css("color", "#0EBE5E");
    } else if ($(this).val() === 'offline' || $(this).val() === 'Offline') {
        $(this).css("color", "#ccc");
    }
});

我发生了两件事：

1. 当我使用.LiveAgentStatusField ，它工作得很好。 但是当我使用span.LiveAgentStatusField ，它甚至在调试过程中都没有进入if代码。

2. 尽管span标记的值应为'Online' ，但$(this).val()在调试期间实际上为"" 。 我在此下添加了一行以捕获val() === ""分支，并确保其指向正确的元素。

实际上，我已经使用.html()解决了我的代码问题。 但是我很想知道为什么它表现得很奇怪。

Answer 1

.val()方法仅适用于表单元素。 如果要获取非格式元素上的value属性的value ，请使用：

$(this).attr('value');

但是，正如其他人指出的那样，最好使用data-前缀（例如data-value ），因为这是符合标准的。 value属性仅对某些元素有效，并且对span s肯定无效。

如果使用data-value属性，则可以使用.data('value')访问它，然后代码将变为：

$(".LiveAgentStatusField").each(function(index) {
    var value = $(this).data("value").toLowerCase();

    if (value === 'online') {
        $(this).css("color", "#0EBE5E");
    } else if (value === 'offline') {
        $(this).css("color", "#ccc");
    }
});

Answer 2

实际上，此处的value是无效属性。 通常用于形式输入。 就您而言，.html（）就足够了

编辑：jQuery具有trim（）函数，用于删除结尾的空格

var spanVal = $(this).html().toLowerCase(); // you don't need to call html() each time
spanVal = $.trim(spanVal);
if (spanVal === 'online') ... // do all the stuff

是的，您可以使用data-value属性并通过data('value')函数获取它，但是在您的情况下，更明显的解决方案是使用已经拥有的类：

  <span class="LiveAgentStatusField online">
                                        Online
            </span>

然后所有的jQuery代码将看起来像

$(".LiveAgentStatusField.online").css("color", "#0EBE5E");
$(".LiveAgentStatusField.offline").css("color", "#ccc");

jQuery将为您完成each循环以及所有其他工作。 另外我也不知道为什么要推迟，但是如果您想一次创建-只需使用CSS

.LiveAgentStatusField.online { color: #0EBE5E; }

Answer 3

我会改用data属性

的HTML

<span class="LiveAgentStatusField" data-value="Online" >

JS

$(this).data("value")

小提琴