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

Question

我想创建一个包含图像和文本的对话框。我有一系列图像和名称。我想为每个图像和名称创建一个新的 div。不确定我是否正确迭代了这些项目，以及这是否不起作用以及为什么不起作用。现在，当我运行此代码时，我遇到语法错误，并且“i”是未定义。任何指导将不胜感激。

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>