如何连接这段代码？我试过这样做，我没有运气

Question

    $(".featured").append("<div>" + 
      "{% for product in collections['no-show-socks-for-" + genderText + "'].products %}" + 
      "<img src=" + "{{product.featured_image | product_img_url: 'large'}}" + ">" + 
      "{% endfor %}" + "</div>")

我有一个应用程序，让用户点击男性或女性。根据用户点击的内容，应弹出某种形式的信息。我想要的信息是在追加功能中，但由于某种原因它没有出现？我想这可能是因为它没有正确连接？

Answer 1

You can try using back-ticks and check it in Babel Try it out.

$(".featured").append(`<div>
{% for product in collections['no-show-socks-for-${genderText}'].products %}
<img src="{{product.featured_image | product_img_url: 'large'}}">
{% endfor %}
</div>`)

https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=CQCgRAdAZgpghgFwK4CcYBMwEoJwA54wB26IABgDzoCWAbgHwBQAkAN4CkABFAPYqd4UPdEgDGCTtSKdRPADZyY46jyIBnANoByIjwC0agBY8A7gZ6iA1mr28Ue4KwDmxdDBQAVGAA8EAXy0AXQhBYTEENU52PxZmCmoAWydONRRRAF4wVlZQkXFoeGQ0dAB9RLgXTgAfASE8hDKkktQ5AC5OLTk4FBctPz8wJjYuVzsomLiAehoGMiwgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=false&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=)

Answer 2

您可以使用反向标记在js上连接多行代码

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings