使用JQuery为两个不同的数组创建每个元素的新div

时间:2017-05-12 20:22:18

标签: javascript jquery html dialog jquery-ui-dialog

我想创建一个包含图像和文本的对话框。我有一系列图像和名字。我想为每个图像和名称创建一个新的div。我不确定我是否正确地迭代了这些项目以及是否以及为什么这样做不起作用。现在,我收到了语法错误,并且我发现了#39; i'我运行此代码时undefined。任何指导都将不胜感激。

var itemImages = ["image1", "image2", "image3"]
var itemNames = ["name1", "name2", "name3"]

var message = '<div class="box-cart-products">
<script>$(itemImages).each(function(i, e){$(".box-cart-
products").append("<div class="box-cart-product"><div class="box-cart-
product-image"><img src="'+itemImages[i]+'"/></div><div 
class="box-cart-product-name"><span>'+itemNames[i]+'</span></div>
</div>")})</script></div>'

$(message).dialog()

这是我的消息变量的细分。

<div class="box-cart-products">
 <script>
  $(itemImages).each(function(i, e){
   $(".box-cart-products").append(
    "<div class="box-cart-product">
      <div class="box-cart-product-image"><img src="'+itemImages[i]+'"/></div>
      <div class="box-cart-product-name"><span>'+itemNames[i]+'</span></div>
    </div>"
   )
  })
 </script>
</div>

1 个答案:

答案 0 :(得分:2)

我认为这个问题只与' vs "有关。确保在必须混合和匹配它们时,使用一个来启动/停止字符串,另一个使用字符串(或者你可以转义字符,但我发现它更难以阅读)。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-cart-products"></div>

<script>
  var itemImages = ["image1", "image2", "image3"]
  var itemNames = ["name1", "name2", "name3"]

  $(itemImages).each(function(i, e) {
    $(".box-cart-products").append(
      '<div class="box-cart-product"> <div class="box-cart-product-image"><img src="' + itemImages[i] + '"/> </div> <div class="box-cart-product-name"> <span>' + itemNames[i] + '</span></div></div>'
    )
  })
</script>
&#13;
&#13;
&#13;