Question

我有以下问题：我希望每次单击列表中的一个元素时，如果需要为列表中的每个元素创建一个函数，则打印数据链接值。 / p>

<ul id="programs">
    <li id="design" data-link="www.monster.inc">Diseño</li>
    <li id="fashion" data-link="www.iceage.inc">Moda</li>
    <li id="management" data-link="www.transilvania.inc">Management</li>
    <li id="arts" data-link="www.ralph.inc">Artes</li>
</ul>

<p id="demo"></p>

<script>

    var one = document.getElementById("design");

    one.onclick = function() {
        var x = one.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = x;
    }

    var two = document.getElementById("fashion");

    two.onclick = function() {
        var y = two.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = y;
    }

    var three = document.getElementById("management");

    three.onclick = function() {
        var z = three.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = z;
    }

    var four = document.getElementById("arts");

    four.onclick = function() {
        var w = four.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = w;
    }

</script>

Answer 1

我可以想到上述结构的两个选择器。

var links = document.querySelectorAll('[data-link]');

和

var links = document.querySelectorAll('#programs > li');

然后遍历NodeList并将函数附加到onclick prop。不过，我建议使用addEventListener。

var links = document.querySelectorAll('[data-link]'),
    demo  = document.getElementById("demo");

links.forEach(function(link){

    link.onclick = function() {
        var x = this.getAttribute("data-link"); 
        demo.innerHTML = x;
    }

});

<ul id="programs">
    <li id="design" data-link="www.monster.inc">Diseño</li>
    <li id="fashion" data-link="www.iceage.inc">Moda</li>
    <li id="management" data-link="www.transilvania.inc">Management</li>
    <li id="arts" data-link="www.ralph.inc">Artes</li>
</ul>

<p id="demo"></p>

Answer 2

对于这个有许多解决方案，有或没有jQuery。

这是一个简单的选项，它只会更新您的一个列表，而不会更新页面上其他广泛选择的元素。

var list = document.getElementById("programs").getElementsByTagName("li")
for (var i=0;i<list.length;i++)
{

  list[i].onclick = function() {
        var x = this.getAttribute("data-link"); 
        document.getElementById("demo").innerHTML = x;
    }
}

Answer 3

您可以将onclick事件附加到父ul元素，并使用event.target属性访问发生点击的子元素。

var programs = document.getElementById("programs");

programs.onclick = function(e) {
  var link = e.target.getAttribute("data-link");
  if (link)
    document.getElementById("demo").innerHTML = link;
};

<ul id="programs">
  <li id="design" data-link="www.monster.inc">Diseño</li>
  <li id="fashion" data-link="www.iceage.inc">Moda</li>
  <li id="management" data-link="www.transilvania.inc">Management</li>
  <li id="arts" data-link="www.ralph.inc">Artes</li>
</ul>

<p id="demo"></p>

您无需遍历每个li并单独附加onclick个事件。

如何从列表中捕获和显示数据，而不必为每个数据创建函数？

3 个答案: