jquery:通过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作为输出。我不知道我做错了什么。

请告知。

id必须是唯一的。如果您想将事件添加到所有这些链接，您可以选择一个常见的选择器，如name或class

$("a[name='btn-classified']").on('click',function(event){
alert($(this).attr('data'))
})

JSFIDDLE

所有按钮都有相同的id，因此只使用其中一个。Id应该是唯一的。你需要给它们不同的id或类来访问它们。

                <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>

如果您正在动态生成按钮，请尝试构建类似的id，以便id保持唯一。这里的问题是，由于所有的btn的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>

<input type="button" id="get_value" value="2">
<script type="text/javascript">
$(document).ready(function(){
   var val = $("#get_value").attr('value');
   alert(val);
});
</script>

元素有重复的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>

Hi第一件事是"id"应该是唯一的，您可以使用jquery每个函数：

$( "a.btn-home" ).each(function( index ) {
   var btn_val= $(this).attr('data');
});

相关内容

最新更新

热门标签：