Question

我有一个数组，其中每个元素引用另一个js文件中的一堆svgs。我试图获取它，以便我的警报消息使用我在数组变量中使用的相同字符串。

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />

    <xsl:template match="/">
      <hmtl>
        <head>
          <title>New Version!</title>
        </head>
        <script>
             console.log('starte');
             var start = 5; 
             '<xsl:variable name="start">{start}</xsl:variable>'
            console.log('<xsl:value-of select="$start"/>')

        </script>
      </hmtl>
    </xsl:template>


</xsl:transform>

任何想法如何实现？

Answer 1

您需要迭代数组并使用相应的键在范围内分配click函数。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode'];

illustArr.forEach(function (key) {
  var bmAnim = document.getElementById('illus-' + key);

  bmAnim && bmAnim.addEventListener('click', function () {
    alert('illus-' + key);
  });
});

Answer 2

在将任何侦听器附加到Array#forEach事件之前，您应该使用click函数迭代数组中的元素。此外，您可以在事件处理程序中使用this.id来引用带有所需后缀的字符串illus-*，而不是再次访问illustArr。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode'];

illustArr.forEach(function (e) {
  document.getElementById('illus-' + e).addEventListener('click', handler)
})

function handler () {
  alert(this.id)
}

<ul>
  <li id="illus-map">Map</li>
  <li id="illus-privacy">Privacy</li>
  <li id="illus-payment">Payment</li>
  <li id="illus-rewards">Rewards</li>
  <li id="illus-passcode">Passcode</li>
</ul>

Answer 3

您可以使用for-loop来完成此操作。另外，请确保检查元素是否存在，以免出错。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode'];

for (var i = 0; i < illustArr.length; i++) {
    bmAnim = document.getElementById('illus-' + illustArr[i]);
    
  if (bmAnim) { //check if element exists
    bmAnim.addEventListener('click', function() {
     alert('illus' + this.id);
    });
  }
}

<div id="illus-map">MAP</div>
<p>
  <div id="illus-privacy">PRIVACY</div>
  <p>
    <div id="illus-payment">PAYMENT</div>
    <p>
      <div id="illus-rewards">REWARDS</div>
      <p>
        <div id="illus-passcode">PASSCODE</div>

如何调用与相同数组的id相对应的数组数据

3 个答案: