Question

我是AJAX的新手，并开始创建一个ajax able脚本，其中，我有许多具有相同类ID的锚标签。但是使用不同的url来调用每个锚标记。我的函数运行但是，它调用所有的锚标记，甚至我用来点击一个锚标记。但是该任务仅针对所单击的锚标签完成。

我的第二个问题是

当一个锚标记的任务完成并且我开始运行其他锚标记时，在我再次刷新网页并单击它之前，它不会完成任务。但它显示了每个锚标记的成功。即使工作也没有完成。希望你理解我的问题，这是我的ajax代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=28', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script> 
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>
//this is for below one
<script type="text/javascript">
 $('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=29', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script>
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>

如果有人不理解这个问题，请在下面评论以获取更多信息。

问题我该如何正确地做到这一点？

Answer 1

首先，关于类选择器的有趣之处在于它选择具有相同类的所有元素。例如：

<a href="#" class="my-selector">Link 1</a>
<a href="#" class="my-selector">Link 2</a>

$('.my-selector').on('click', function() {
    // Code to run when either Link 1 OR Link 2 are clicked
});

因此，代码中发生的事情是，您已为单个类选择器注册了两个函数，即使您只单击其中一个链接，也会导致两个函数都运行。

现在，如果我更正，两个函数之间的唯一区别就是post id。那么为什么不将post id作为变量并只使用一个函数呢？

首先将你的html重写为：

<a href="#" data-post-id="28" title="Remove Posts" class="submitdelete">Remove Posts</a>
...
<a href="#" data-post-id="29" title="Remove Posts" class="submitdelete">Remove Posts</a>

您是否看到data-post-id属性？我可以放任何东西，它不会显示，但链接到DOM元素。所以现在无论何时点击链接，我都能真正区分点击哪个链接！在这里，试试这个：

$('.submitdelete').on('click', function(e) {
    e.preventDefault();

    var postID = $(this).data('postId');
    alert('I\'m about to delete the post with id: [' + postID + ']');
});

检查this fiddle是否有演示。（只需点击链接）

所以，我想你已经知道如何继续;只需使用这个小片段并将postID变量插入到您的（单个！）ajax函数中。为方便起见，您可以使用$.post()功能：

var deleteUrl = 'http://localhost/w/wp-admin/admin.php';

$('.submitdelete').click(function(e) {
    e.preventDefault();

    $.post( deleteUrl,
        {
            page: 'rssap-feeds',
            action: 'removePosts',
            post: $(this).data('postId')
        },
        function(response) {
            alert("You have made it!");
        }
    );
});

Answer 2

你可以继续，通过在javascript中创建一个函数并在你的锚标签中使用它，我使用giorgio方法，你必须使用属性data-post-id。所以这是我的代码，

                <script type="text/javascript">         
function callbb(postID){
$.ajax({
type:'POST', 
url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=' + postID + '', 
success: function(response) {
 alert('you made it ' + postID + '');
}
});
}
</script>

你的锚标签看起来像什么，

 <a href="#" data-post-id="29" onclick="var postID = $(this).data('postId'); callbb(postID)" title="Remove Posts" class="submitdelete">Remove Posts</a>

希望它对你有所帮助。或其他人

如何为具有相同类ID但要调用的URL不同的给定列表锚标记调用ajax

2 个答案: