[英]val() is showing empty string when it actually contains a value
My generated code looks like this in chrome's developer tools: 在chrome的开发人员工具中,我生成的代码如下所示:
<tbody>
<tr>
<td>
<span class="LiveAgentStatusField" value="Online" >
Online
</span>
</td>
</tr>
</tbody>
Please note that this html code is generated by salesforce and I don't have much control over this except the span. 请注意,此html代码是由salesforce生成的,除了跨度之外,我对此没有太多控制权。
My jQuery code: 我的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");
}
});
There are two wield things happening to me: 我发生了两件事:
When I am using .LiveAgentStatusField
, it works pretty fine. 当我使用.LiveAgentStatusField
,它工作得很好。 But when I was using span.LiveAgentStatusField
, it doesn't even go into the if code during debugging. 但是当我使用span.LiveAgentStatusField
,它甚至在调试过程中都没有进入if代码。
Although the value of the span tag should have a value of 'Online'
, $(this).val()
is actually ""
during debugging. 尽管span标记的值应为'Online'
,但$(this).val()
在调试期间实际上为""
。 I added a line under this to catch the val() === ""
branch and made sure this is pointing to the right element. 我在此下添加了一行以捕获val() === ""
分支,并确保其指向正确的元素。
Actually, I have already resolved my code issue with using .html()
. 实际上,我已经使用.html()
解决了我的代码问题。 But I am quite keen to find out why it is acting strange. 但是我很想知道为什么它表现得很奇怪。
The .val()
method only works with form elements. .val()
方法仅适用于表单元素。 If you want to get the value of the value
attribute on a non-form element, use: 如果要获取非格式元素上的value
属性的value
,请使用:
$(this).attr('value');
However, as others have noted, it is preferable to use a data-
prefix (eg data-value
), as this is standards compliant. 但是,正如其他人指出的那样,最好使用data-
前缀(例如data-value
),因为这是符合标准的。 The value
attribute is only valid on certain elements and it is certainly not valid on span
s. value
属性仅对某些元素有效,并且对span
s肯定无效。
If use a data-value
attribute, you can access it using .data('value')
and then your code becomes: 如果使用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");
}
});
Actually value
is invalid attribute here. 实际上,此处的value
是无效属性。 Commonly It is used for inputs in form. 通常用于形式输入。 In your case .html() is enough 就您而言,.html()就足够了
EDIT: jQuery has trim() function for removing trailing whitespaces 编辑: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
Yes, you can use data-value
attribute and get it with data('value')
function, but in your case more obvious solution is to use class you already have: 是的,您可以使用data-value
属性并通过data('value')
函数获取它,但是在您的情况下,更明显的解决方案是使用已经拥有的类:
<span class="LiveAgentStatusField online">
Online
</span>
then all jquery code will look like 然后所有的jQuery代码将看起来像
$(".LiveAgentStatusField.online").css("color", "#0EBE5E");
$(".LiveAgentStatusField.offline").css("color", "#ccc");
jQuery will do each
loop and all other stuff for you. jQuery将为您完成each
循环以及所有其他工作。 Also I don't know why you are making it deferred, but if you want to make it at once - just use css 另外我也不知道为什么要推迟,但是如果您想一次创建-只需使用CSS
.LiveAgentStatusField.online { color: #0EBE5E; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.