JavaScript或Jquery中的选择器
[英]Selectors in javascript or Jquery
问题描述
How to get value of particular selector with same class? 
如何获得相同类的特定选择器的值？
function rev() {
var username = document.getElementByClass(value).value; /// or textContent;
return alert (username);
}
<a href="#" class="but" onclick="rev()">Hey</a>
<a href="#" class="but" onclick="rev()">Hey2</a>
<button class="but" onclick="rev()">hey</button>
<button class="but" onclick="rev()">NOww</button>
But the reult always HEY 但是结果总是嘿
Any ideas? 有任何想法吗？
3 个解决方案
解决方案1
0 2017-04-20 14:42:13
It looks like you're trying to get the innerText of each element with the class of but , then alert that value/innerText based on the element that was clicked... 看起来您正在尝试使用but类来获取每个元素的innerText ，然后根据所单击的元素来alert该value/innerText 。
You could grab all buts then supply each but with an onclick method like so: 您可以抓住所有buts but ，然后为每个buts supply提供onclick方法，如下所示：
var buts = document.getElementsByClassName('but');
var keys = Object.keys(buts);
keys.forEach(function(but, idx) {
buts[idx].onclick = function() {
var username = buts[idx].innerText;
alert(username);
};
});
This will alert the Hey for the first but , Hey2 for the second but , etc.... You can see the example working here: 这将alert first but的Hey ， second but Hey2 ，等等。。。您可以在此处查看示例：
http://jsbin.com/yunulayihi/edit?html,js,output http://jsbin.com/yunulayihi/edit?html,js，输出
解决方案2
0 2017-04-20 14:57:32
Your question as asked has multiple issues, and I'm assuming it's intended to be pseudocode, because it wouldn't even get as far as returning 'Hey' as written. 您所提出的问题有多个问题，我假设它是伪代码，因为它甚至还不及返回书面形式的“嘿”。
Firstly, I believe you're intending to use getElementByClassName , not 'getElementByClass' 首先，我相信您打算使用getElementByClassName ，而不是'getElementByClass'
Secondly, I think you want textContent , not value from the clicked element. 其次，我认为您想要textContent ，而不是clicked元素的value 。
But as far as your problem, I think the issue is that you're calling: 但就您的问题而言，我认为问题是您在打电话：
document.getElementByClassName('but').value
Which effectively means that when rev() is called, it searches the document for ALL instances of .but and looks for an object property called 'value'... 这实际上意味着，当调用rev（）时，它将在文档中搜索.but所有实例， .but查找一个名为“值”的对象属性...
Instead, you want the textContent of just the element whose onclick event has been triggered. 相反，您只需要其onclick事件已被触发的元素的textContent。 To do that, you need to capture the event in your event handler function, rev() 为此，您需要在事件处理程序函数rev()捕获事件。
Here's a way you can attach rev() function as the 'click' event handler to all items in the document with the className .but -- note that I removed the function rev() from the HTML onclick attribute, and instead it gets added do each element when .map() loops through and calls button.addEventListener() : 这里是您可以附加的方式rev()函数的“click”事件处理程序与类名的文件中的所有项目.but -注意，我删除从HTML onclick属性的功能REV（），而是将其添加当.map()循环并调用button.addEventListener()时，执行每个元素：
var buts = document.getElementsByClassName('but'); var buttons = Array.prototype.slice.call(buts); buttons.map(function(button) { button.addEventListener('click', rev); }); function rev(e) { // This is the element targeted by the current event. var element = e.target; // Assuming you want 'Hey', 'Hey2', etc. var value = element.textContent; alert(value); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <a href="#" class="but">Hey</a> <a href="#" class="but">Hey2</a> <button class="but">hey</button> <button class="but">NOww</button> </body> </html>
The short answer is really: to get some specific value from an element which is listening for an event, you have to capture the event object -- the 'target' property of the event object is the element listening on the event. 答案很简单：要从正在监听事件的元素中获取特定值，您必须捕获事件对象-事件对象的'target'属性是监听事件的元素。
解决方案3
-3 2017-04-20 14:23:35
you can use each function in jquery to get text 您可以使用jquery中的每个函数来获取文本
$('.but').each(function(){
$(this).text() // you can access any attribute for this class
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.