Question

我生成的代码在chrome的开发人员工具中看起来像这样：

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

请注意，这个html代码是由salesforce生成的，除了span之外，我对此没有多少控制权。

我的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");
    }
});

有两件事情发生在我身上：

当我使用.LiveAgentStatusField时，它的效果非常好。但是当我使用span.LiveAgentStatusField时，它在调试期间甚至没有进入if代码。
虽然span标记的值应为'Online'，但$(this).val()在调试期间实际为""。我在其下添加了一行来捕获val() === ""分支并确保它指向正确的元素。

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

Answer 1

.val()方法仅适用于表单元素。如果要在非表单元素上获取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")

FIDDLE

val（）在实际包含值时显示空字符串

3 个答案: