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标签中选择选项

回答

相关问题