jQuery：通過attr獲取按鈕的值
[英]jquery: get value of button by attr
問題描述
我有一個頁面，它有多個按鈕。 這些按鈕是動態生成的。 您可以在下面的示例中看到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>
我正在嘗試獲取jquery中數據的值。
myvar1= $('#btn-classified').attr('data');
alert(myvar1);
但是問題一直都是我得到26作為輸出。 我不確定我在做什么錯。
請指教。
7 個解決方案
解決方案1
3 已采納 2016-07-27 04:44:00
id必須是唯一的。 如果要將事件添加到所有這些鏈接中，則可以選擇一個通用選擇器，例如name或class
$("a[name='btn-classified']").on('click',function(event){
alert($(this).attr('data'))
})
解決方案2
2 2016-07-27 04:41:05
您在所有按鈕上都具有相同的ID，因此僅使用其中一個按鈕。 ID應該是唯一的。 您需要為他們提供不同的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
如果要動態生成按鈕，請嘗試像這樣構建id，以使id保持唯一。 這里的問題是ur ID，因為所有ur btns的id都相似，它將僅選擇第一個值。
這是上面的示例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
您有重復的ID元素。 ID必須是唯一的。 您可以將dom修改為具有相同的類。 像這樣：
<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>
然后使用類選擇器定位它們，並使用.each()進行迭代以獲取各自的屬性值：
$('.btn-classified').each(function(){
console.log($(this).attr('data'))
});
工作片段：
$('.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
嗨，第一件事是'id'應該是唯一的，您可以使用jquery每個函數：
$( "a.btn-home" ).each(function( index ) {
var btn_val= $(this).attr('data');
});
將data屬性設置為button並鏈接所述attr jquery的值
[英]Setting data attribute to button and chainging the value of said attr jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.