Как объединить этот код?Я пытался сделать это, и мне не повезло

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