Question

所以我有一个网页，其中包含从CMS填充的图像列表。每张图片都有一个Alt标签，我想从中提取内容并在页面下方填充一个选择框。

使用jquery如何在页面上找到具有set类的所有图像，然后从匹配的每个图像中推断出ALT值，然后使用图像ALT文本动态创建选择框的选项值/字符串？

非常感谢任何帮助。

编辑：问题2 @gavgrif谢谢你的帮助，最后一个问题，如果我可以，所以我设法得到我的选择框（#imageSelection）选项填充jquery根据你的答案，但是，当我通过AJX发布表单我得到了以下值对象htmlselectelement ，而不是填充选项的值。

在我的AJAX＆gt;表单脚本我正在定义以下内容......

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

我的其他表单输入.val（）工作正常。

如果你能指出我正确的方向（再次），那将是最受欢迎的。

此致杰夫

Answer 1

修改@TheYaXxE的答案 - 您不需要迭代图像来获取类 - 只需确保它是图像的唯一类，然后将该类用作直接选择器。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

喜欢这个吗？

class Example(models.Model):
    date = models.DateTimeField(auto_now_add=True)

    def get_date(self):
        time = datetime.now()
        if self.created_at.day == time.day:
            return str(time.hour - self.created_at.hour) + " hours ago"
        else:
            if self.created_at.month == time.month:
                return str(time.day - self.created_at.day) + " days ago"
            else:
                if self.created_at.year == time.year:
                    return str(time.month - self.created_at.month) + " months ago"
        return self.created_at

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

Answer 3

那样的东西？

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

这取决于您的需求，对您的目标的更多解释可以在代码中进行更改。

Jquery - 从页面上的img alt标签动态填充选择选项

3 个答案: