jQuery：通过attr获取按钮的值
[英]jquery: get value of button by attr
问题描述
I have a page and it have multiple buttons. 
我有一个页面，它有多个按钮。 These buttons are generated dynamically. 这些按钮是动态生成的。 you can see in below example value of data= is generated dynamically. 您可以在下面的示例中看到data =的值是动态生成的。
<a id="btn-classified" name="btn-classified" data-target="#Modal" data-toggle="modal" data="26" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a>
<a id="btn-classified" name="btn-classified" data-target="#ApplyModal" data-toggle="modal" data="23" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a>
<a id="btn-classified" name="btn-classified" data-target="#ApplyModal" data-toggle="modal" data="22" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a>
i am trying to get the value of data in jquery. 我正在尝试获取jquery中数据的值。
myvar1= $('#btn-classified').attr('data');
alert(myvar1);
But problem is all the time i am getting 26 as output. 但是问题一直都是我得到26作为输出。 I am not sure what am i doing wrong. 我不确定我在做什么错。
Please advise. 请指教。
7 个解决方案
解决方案1
3 已采纳 2016-07-27 04:44:00
解决方案2
2 2016-07-27 04:41:05
You have the same id on all buttons so only one of them is used. 您在所有按钮上都具有相同的ID，因此仅使用其中一个按钮。 Ids should be unique. ID应该是唯一的。 You need to give them different ids or classes to access them with. 您需要为他们提供不同的ID或类，以使用它们。
解决方案3
2 2016-07-27 04:51:39
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<a id="btn-classified1" name="btn-classified" data-target="#Modal"
data-toggle="modal" data="26" class="btn-home"
href="javascript:void();" data-original-title="" title="">Apply</a>
<a id="btn-classified2" name="btn-classified" data-target="#ApplyModal"
data-toggle="modal" data="23" class="btn-home"
href="javascript:void();" data-original-title="" title="">Apply</a>
<a id="btn-classified3" name="btn-classified" data-target="#ApplyModal"
data-toggle="modal" data="22" class="btn-home"
href="javascript:void();" data-original-title="" title="">Apply</a>
<script type="text/javascript">
$('.btn-home').each(function(){
alert($(this).attr("id"));
});
</script>
</body>
</html>
解决方案4
1 2016-07-27 04:42:59
if you are generating buttons dynamically, try building id also like that so that id remains unique. 如果要动态生成按钮，请尝试像这样构建id，以使id保持唯一。 Here the problem is with ur ID as id of all ur btns are similar , it will pick only the first value. 这里的问题是ur ID，因为所有ur btns的id都相似，它将仅选择第一个值。
here is a sample PHP code for the above 这是上面的示例PHP代码
<?php for($i=0; $i<10; $i++): ?>
<button id="<?php echo 'idName_'.$i ?>" data="<?php echo 'data_'.$i ?>" onClick=clickAction(<?php echo $i ?>) >
<?php endfor; ?>
<script>
function clickAction(i){
myvar1= $('#idName_'+i).attr('data');
alert(myvar1);
}
</script>
解决方案5
1 2016-07-27 04:43:02
You have duplicate IDs for elements. 您有重复的ID元素。 IDs must be unique. ID必须是唯一的。 You can modify the dom to have same class. 您可以将dom修改为具有相同的类。 Like this: 像这样：
<a class="btn-classified" name="btn-classified" data-target="#Modal" data-toggle="modal" data="26" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a>
<a class="btn-classified" name="btn-classified" data-target="#ApplyModal" data-toggle="modal" data="23" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a>
<a class="btn-classified" name="btn-classified" data-target="#ApplyModal" data-toggle="modal" data="22" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a>
And then target them using class selector and iterate using .each() to get respective attribute values: 然后使用类选择器定位它们，并使用.each()进行迭代以获取各自的属性值：
$('.btn-classified').each(function(){
console.log($(this).attr('data'))
});
Working Snippet: 工作片段：
$('.btn-classified').each(function(){ console.log($(this).attr('data')) });
<a class="btn-classified" name="btn-classified" data-target="#Modal" data-toggle="modal" data="26" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a> <a class="btn-classified" name="btn-classified" data-target="#ApplyModal" data-toggle="modal" data="23" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a> <a class="btn-classified" name="btn-classified" data-target="#ApplyModal" data-toggle="modal" data="22" class="btn-home" href="javascript:void();" data-original-title="" title="">Apply</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
解决方案6
1 2016-07-27 04:44:36
<input type="button" id="get_value" value="2">
<script type="text/javascript">
$(document).ready(function(){
var val = $("#get_value").attr('value');
alert(val);
});
</script>
解决方案7
1 2016-07-27 04:48:30
Hi First thing is that 'id' should be unique and You can use jquery each function: 嗨，第一件事是'id'应该是唯一的，您可以使用jquery每个函数：
$( "a.btn-home" ).each(function( index ) {
var btn_val= $(this).attr('data');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.