VAL（）中顯示空字符串時，它實際上包含在Chrome的開發者工具的值

我生成的代碼如下所示：VAL（）中顯示空字符串時，它實際上包含在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"); 
    } 
});

有兩個持的事情發生在我身上：

當我使用.LiveAgentStatusField，它工作得很好。但是當我使用span.LiveAgentStatusField時，它在調試過程中甚至沒有進入if代碼。
儘管span標記的值應該爲'Online'的值，$(this).val()實際上是""在調試期間。我在此下面添加了一行以捕獲val() === ""分支，並確保它指向正確的元素。

其實，我已經解決了我的代碼問題，使用.html()。但我很想知道爲什麼它會變得很奇怪。

來源

2014-12-22 Lance Shi

使用'$（本）。html的（）'或'$（本）的.text（）' – Cattla

值通常用於表單控件。使用'data-value'和'$（this）.data（'value'）'而不是 – charlietfl

Stackoverflow用戶現在相當憤世嫉俗。如果你看到所有問題板，那麼帶有正面標記的問題就會比負面問題少讓我覺得有一些專業評論家除了給予負面評分之外沒有其他要做的事情 –

.val()方法僅適用於表單元素。如果你想獲得一個非表單元素上的value屬性的值，使用：

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

然而，正如其他人所指出的，最好是使用data-前綴（如data-value），因爲這是符合標準。 value屬性僅對某些元素有效，並且在span上肯定無效。

如果使用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"); 
    } 
});

來源

2014-12-22 01:03:54 JLRishe

其實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; }

來源

2014-12-22 01:02:29 vladkras

必須修剪html，否則不會得到預期的比賽 – charlietfl

這個類的方法是很多更清潔的 – DelightedD0D

我會用data屬性，而不是

HTML

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

$(this).data("value")

FIDDLE

來源

2014-12-22 01:03:45 jmore009

好的答案，這將有助於詳細說明爲什麼這比使用'value'屬性更好（這不是'span'的有效屬性），以及數據屬性是如何將元數據合併到標記中的標準方式，只有代碼纔會有答案，並不清楚。 – nbrooks

VAL（）中顯示空字符串時，它實際上包含在Chrome的開發者工具的值

回答

相關問題