Question

基本上我拥有的是从数据库中查询的很多<a>标签。它们被显示，当用户点击其中一个标签时，它会触发ajax功能。现在，一个按钮可以完成所有按钮的工作。

标签看起来像这样：

<a  value='<?php echo $setit ?>' class='button' setdata='<?php echo 
$setit ?>'><?php echo $setit ?></a>

ajax函数看起来像这样：

$(document).ready(function(){
    $(".button").click(function(event){     
        var data1=$(this).data('setdata');
        $.ajax({
            url: "set_freq.php",
            type: "POST",
            data: {"set_freq":data1}, 
            success: function(data){
                data = JSON.stringify(data);
                console.log(data);
            }
        });
    });
});

我认为我需要使按钮id-s唯一，因此该函数只能获得正确的按钮值。我是在正确的轨道上吗？怎么办呢？

Answer 1

无需使按钮的ID唯一。你可以简单地使用

$('.button').click(function(e) {/*ajax*/});

查询所有按钮。请注意，您必须使用.（对于类名称）而不是#（对于ids）进行查询。函数$(this)内部将始终引用已单击的链接。

另一方面，你的id应该是唯一的。如果您不介意每次刷新都会更改，则可以使用uniqueid：

<a id="<?= uniqueid(); ?>" ... >

否则，您的数据库应该具有您可能使用的唯一索引。但我认为没有理由设置一个id，因为你的JavaScript没有。

Answer 2

$("#button")使用id="button"定位一个元素，但您肯定希望使用class="button"定位元素，如HTML中所示...所以你应该用一个点替换＃，就像在CSS中。 $(".button")

此外，您不需要使用ID，即使您有多个按钮，eventHandler也会将此作为目标元素接收，因此您始终可以访问“当前”数据。

Answer 3

另外我认为你的数据属性格式错误。权利在这里：

<a  value='<?= $setit ?>' class='button' data-set='<?= $setit ?>'><?= $setit ?></a>

Answer 4

只需更改a标记，如下所示。

<a class='button' data-setdata='<?php echo $setit ?>'><?php echo $setit ?></a>

Answer 5

替换您的代码：

<a  value='<?php echo $setit ?>' class='button' setdata='<?php echo 
$setit ?>'><?php echo $setit ?></a>

致：

<a class='button' id='setit'><?php echo $setit ?></a>

并替换你的ajax函数：

$(document).ready(function(){
    $(".button").click(function(event){     
        var data1=$(this).data('setdata');
        $.ajax({
            url: "set_freq.php",
            type: "POST",
            data: {"set_freq":data1}, 
            success: function(data){
                data = JSON.stringify(data);
                console.log(data);
            }
        });
    });
});

致：

$(document).ready(function(){
    $(".button").click(function(event){    
        var data1 = document.getElementById("setit").innerHTML
      $.ajax({
            url: "set_freq.php",
            type: "POST",
            data: {"set_freq":data1}, 
            success: function(data){
                data = JSON.stringify(data);
                console.log(data);
            }
        });
    });
});

Javascript - 获取ajax调用的按钮标记值

5 个答案: