Jquery - 動態地從img alt標籤中選擇選項

因此，我有一個網頁，其中包含從CMS填充的圖像列表。每個圖像都有一個Alt標籤，我想從中提取內容並填充下一頁的選擇框。Jquery - 動態地從img alt標籤中選擇選項

使用jquery如何查找頁面上的所有圖像與設置的類，然後從每個匹配的圖像外推ALT值，然後動態創建選擇框的ALT值文本的選擇框/字符串？

任何幫助將不勝感激。

編輯：問題2 @gavgrif感謝您的幫助，如果可以的話最後一個問題，所以我設法讓我的選擇框（#imageSelection）選項的jQuery填充按您的答案，但是，當我發佈通過AJX的表單我得到以下值對象htmlselectelement而不是選項填充的值。

在我AJAX>表腳本我定義以下...

var image = $("#imageSelection").val();

我的其他形式的投入.VAL（）工作正常。

如果你能指出我正確的方向（再次），將不勝感激。

問候傑夫

來源

2017-01-23 Geoff Moore

您好，歡迎StackOverflow上。請花一些時間閱讀幫助頁面，尤其是名爲[「我可以詢問什麼主題？」（http://stackoverflow.com/help/on-topic）和[「我應該問什麼類型的問題避免問？「]（http://stackoverflow.com/help/dont-ask）。更重要的是，請閱讀[Stack Overflow問題清單]（http://meta.stackexchange.com/q/156810/204922）。您可能還想了解[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 –

修改@TheYaXxE的答案 - 您不需要迭代圖像以獲取類 - 只需確保它是圖像的唯一類，然後將該類用作直接選擇器。

$('.take-this').each(function() { 
 
\t var altValue = $(this).attr('alt'); 
 
    $('<option value='+altValue+'>'+altValue+'</option>').appendTo($('select')); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img class="take-this" alt="One"/> 
 
<img class="take-this" alt="Two"/> 
 
<img class="not-this" alt="Three"/> 
 
<img class="not-this" alt="Four"/> 
 
<img class="take-this" alt="five"/> 
 
<br/> 
 
<select name="select"> 
 
</select>

來源

2017-01-23 21:47:36 gavgrif

哇謝謝你們！我一直在思考這個問題4個多小時，試圖找出答案。謝謝你的幫助，@ gavgrif你的解決方案對我的需求是完美的，非常感謝你。 –

高興地幫助 - 還有一件事 - 不要忘記，您應該在圖像聲明中具有尺寸屬性 - 並且如果圖像出於任何原因未被加載或被阻止，則應使用ALT文本 - 因此，文字應該真的是圖像意圖提供的內容或消息的表示。如果您想使用較少描述性的文本 - 那麼您可以添加一個數據屬性並使用它替代替代文本 – gavgrif

Heey。你偷了我的答案！：O :) – TheYaXxE

喜歡這個？

$('img.take-this').each(function() { 
 
    var altValue = $(this).attr('alt'); 
 
    $('<option value='+altValue+'>'+altValue+'</option>').appendTo($('select')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img class="take-this" alt="One"/> 
 
<img class="take-this" alt="Two"/> 
 
<img class="not-this" alt="Three"/> 
 
<img class="not-this" alt="Four"/> 
 
<img class="take-this" alt="five"/> 
 
<br/> 
 
<select name="select"> 
 
</select>

來源

2017-01-23 21:42:05 TheYaXxE

對不起 - 我沒有偷它 - 你有一個解決方案，我修改，然後在我的答案貸記你。主要區別在於你正在檢查元素是否具有指定的類，如果是這樣 - 函數 - 我的觀點是你不需要做檢查，並且你可以用元素迭代元素指定的類 - 我看到您在發佈我的代碼後編輯了您的答案。所以我沒有竊取答案 - 我改進了它，並激發了編輯到你的。但我確實使用你的代碼作爲開始 - 這就是爲什麼我在你的回答中把它記入你的信息:) – gavgrif

類似的東西？

$(document).ready(function(){ 
 
    var $selector = $('.imgSelector'); 
 
    var options = ''; 
 

 
    $('body img').each(function(indx, val){ 
 
    options += '<option>' + $(val).attr('alt') + '</option>' 
 
    }); 
 
    console.log(options); 
 
    $selector.html(options); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <img alt="alt 1" /> 
 
    <img alt="alt 2" /> 
 
    <img alt="alt 3" /> 
 
    <img alt="alt 4" /> 
 
    <img alt="alt 5" /> 
 
    <select class="imgSelector"></select> 
 
</body>

這取決於你的需要和你的目標更多的解釋可以使代碼更改。

來源

2017-01-23 21:46:36 Daniel

Jquery - 動態地從img alt標籤中選擇選項

回答

相關問題