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

Question

我想创建一个带有图像和文本的对话框。我有一系列图像和名称。我想为每个图像和名称创建一个新的 div。不确定我是否正确地迭代了这些项目，以及是否以及为什么这不起作用。现在，当我运行此代码时，我遇到了一个语法错误，并且“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>

Answer 1

我认为这个问题与 ' 与 " 有关。确保当你必须混合和匹配它们时，使用一个来开始/停止你的字符串，另一个在字符串内（或者你可以转义字符，但我发现这更难阅读）。

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