从在javascript中共享类的THIS元素中获取值

如果我能正确理解你。。。

像这样的东西应该有助于

在这里，您只需监听所有playBtn上的点击，但会从您点击的那个中获得价值。

document.addEventListener('click', function(event) {
  var button;
  button = event.target;
  if (button.classList.contains('playBtn')) {
    console.log(button.getAttribute('value'));
  }
});

<button class="playBtn" value="{{filename}}"></button> 
<button class="playBtn" value="{{filename}}"></button>
<button class="playBtn" value="{{filename}}"></button>
<button class="playBtn" value="{{filename}}"></button>
<button class="playBtn" value="{{filename}}"></button>

var play = document.getElementsByClassName('playBtn');
for(var i=0, len=play.length; i<len; i++){
    (function(index){
        play[i].onclick = function(){
            alert(play[index].value);    
        }
    })(i);
}

<button class="playBtn" value="one">button one</button>
<button class="playBtn" value="two">button two</button>
<button class="playBtn" value="three">button three</button>
<button class="playBtn" value="four">button four</button>
<button class="playBtn" value="five">button five</button>

香草JS

document.querySelectorAll返回一个NodeList，因此我们需要对该集合进行迭代，并将事件侦听器应用于其中的每个元素。通过扩展NodeList原型，我们可以添加自己的小函数来向每个节点添加任何事件。然后我们有了一个很好的jQueryesq方法来使用它：

NodeList.prototype.on = function(event,func) {
    [].forEach.call(this, function (el) {
        el.addEventListener(event, func, false);
    });
    return this;//return self to maintain chainability
};
//to listen for a click on each of these:
document.querySelectorAll('.playBtn').on('click',function(){
    alert(this.value);
});

你甚至可以像这样将这些事件链接起来：

document.querySelectorAll('.playBtn').on('mouseover',function(){
    this.style.borderColor='red';
}).on('mouseout',function(){
    this.style.borderColor='';
});

以下是演示jsFiddle和片段：

NodeList.prototype.on = function(event,func) {
    [].forEach.call(this, function (el) {
        el.addEventListener(event, func, false);
    });
    return this;//return self to maintain chainability
};
document.querySelectorAll('.playBtn').on('click',function(){
    alert(this.value);
    return false;
});
document.querySelectorAll('.playBtn').on('mouseover',function(){
    this.style.borderColor='red';
}).on('mouseout',function(){
    this.style.borderColor='';
});

 <button class="playBtn" value="a">A</button> 
 <button class="playBtn" value="b">B</button>
 <button class="playBtn" value="c">C</button>
 <button class="playBtn" value="d">D</button>
 <button class="playBtn" value="e">E</button>

使用jQuery

当然，如果jQuery对您可用，那么所有这些都会被烘焙。它不会直接回答您的问题"我如何让querySelector从我点击的值中获取值？"，因为它不是直接使用querySelector，但它可以做您需要的事情：

$(function(){//wait for document ready
    $(".playBtn").on("click",function(){
        alert($(this).val());
    });
})

演示jsFiddle

$(function(){
    $(".playBtn").on("click",function(){
        alert($(this).val());
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="playBtn" value="a">A</button> 
 <button class="playBtn" value="b">B</button>
 <button class="playBtn" value="c">C</button>
 <button class="playBtn" value="d">D</button>
 <button class="playBtn" value="e">E</button>

文档.querySelector（）将只返回第一个找到的节点document.querySelectorAll将返回一个需要迭代的列表。

然而，使用jQuery可以很容易地做到这一点：

var selectedSong = '';
$('.playBtn').on('click', function()
{
    selectedSong = $(this).val();
});

见小提琴。

或者使用getElementsByClassName或querySelectorAll使用纯JS

var selectedSong = '';
var a_btn = document.getElementsByClassName('playBtn');
// or querySelectorAll
// var a_btn = document.querySelectorAll('.playBtn'); 
for(var i = 0; i < a_btn.length; i++)
{
    a_btn[i].onclick = function() {
        selectedSong = this.value;  
    };
};

见小提琴。