使用速記可以將數據添加到選項嗎？

我試圖將動態信息添加到選擇元素中的選項。我想使用數據，因爲它符合所有瀏覽器。我嘗試過使用alt，它確實顯示在chrome中，但我不確定在選項元素上是否有適當的alt標記。使用速記可以將數據添加到選項嗎？

jQuery(el).append($('<option>', { 
    value: index, 
    text: column_persistence[index], 
    alt: check_box_id 
}));

如何添加使用append jQuery的方法的數據屬性動態？

來源

2017-06-19 Alexander Dixon

是的，不要使用'alt'：https://api.jquery.com/jquery.data/ –

三種方法可以做到這一點：

$(el).append($('<option>', { 
    value: index, 
    text: column_persistence[index], 
    "data-alt": check_box_id 
}));

或者：

$(el).append($('<option>', { 
    value: index, 
    text: column_persistence[index] 
}).data("alt", check_box_id));

或者：

$(el).append($('<option>', { 
    value: index, 
    text: column_persistence[index] 
}).attr("data-alt", check_box_id));

這些應該導致HTML元素：

<option value="1" data-alt="chbk-1">Column Name</option>

來源

2017-06-19 15:45:45 Twisty

第二種方法正是我正在尋找的答案。 –

alt（簡稱「備用文本」）僅適用於<img>元素並且適用於可訪問性原因。屏幕閱讀器會向視障用戶大聲朗讀，而當圖像無法顯示時，會顯示什麼代替圖像。

從MDN：

ALT

該屬性定義描述圖像的替代文字。如果圖片網址錯誤，用戶將看到此文本，圖片未使用支持的格式之一，或者圖片尚未下載。

瀏覽器並不總是顯示元素引用的圖像。如果用戶選擇不顯示圖像，或瀏覽器由於無效或不支持的類型而導致瀏覽器無法顯示圖像，則非圖形瀏覽器（包括人使用的瀏覽器）會出現這種情況。在這些情況下，瀏覽器可能會用屬性中定義的文本替換圖像。出於這些原因和其他原因，您應該儘可能爲alt提供有用的值。

省略此屬性表明該圖像是內容的關鍵的一部分，並且沒有可用的文本等效內容。將此屬性設置爲空字符串（alt =「」）表示此圖像不是內容的關鍵部分，非視覺瀏覽器可能會從渲染中忽略它。

要添加data屬性和數據，它只是訪問.data()方法並傳遞-name和價值屬性：

$("body").data("foo", 52);

隨着.append()方法，你幾乎可以設置屬性爲你會有其他的，但一定要把整個屬性用引號引起來。它看起來像這樣：

jQuery(el).append($('<option>', { 
    value: index, 
    text: column_persistence[index], 
    "data-Name": theValue 
});

請參閱this的文檔。

來源

2017-06-19 15:42:19

使用速記可以將數據添加到選項嗎？

回答

相關問題