javascript - JS里有和var i=$('.list p').index($(this));一样效果的方法吗？

问题描述

问 题

<div class="list">
        <p>Six60 - Special</p>
        <p>曲婉婷 - 没有什么不同</p>
        <p>水木年华 - 一生有你</p>
    </div>

var songArr = ["audio/Six60 - Special.mp3", 
"audio/曲婉婷 - 没有什么不同.mp3",
 "audio/水木年华 - 一生有你.mp3"];

 $('.list p').click(function() {
    var i = $('.list p').index($(this));
    music.src = songArr[i];
    music.play();
  })

效果是点哪个就播放哪个，但是如果不用jquery，用js有没有可以返回我点的是第几个P标签的方法，什么方法都可以。

解决方案

    // 使用jquery
    $('.list p').click(function(e) {
        e.stopPropagation();
        
        var i = $(e.target).index();
        
        music.src = songArr[i];
        music.play();
    });
    
    // 没主意题目LZ说不使用jquery, 使用原生js
    var list = document.getElementsByClassName('list')[0];
    var p = list.getElementsByTagName('p');
    for (var i = 0; i < p.length; i++) {
        p[i].index = i;
        p[i].onclick = function() {
            var j = this.index;
            alert(j);
        }
    }

这篇关于javascript - JS里有和var i=$('.list p').index($(this));一样效果的方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！