Question

我的页面上有一个名为“a.add_mycrate”的重复课程。此脚本仅针对单击的实例（this）并处理它。

这是我的JS：

jQuery(document).ready(function(){
jQuery(document).on('click', "a.add_mycrate", function(event) {
    event.preventDefault();

    var title = jQuery(this).attr('data-title');
    var artwork = jQuery(this).attr('data-artwork');
    var stream = jQuery(this).attr('data-stream');
    var download = jQuery(this).attr('data-download');

    var data = {
                'action': 'addToCrate',
                'security': jQuery( '#crate-nonce' ).val(),
                'podtitle' : title,
                'podartwork' : artwork,
                'podstream' : stream,
                'podsave' : download
               };                  

    jQuery.post(myCrate.ajaxurl, data, function(response) {

        jQuery('a.add_mycrate', this).html(response);

        alert(response);
    });              
  });
});

这是在页面上呈现实际链接的方式（如果它有帮助）：

<a class="add_mycrate" href="#" data-title="Title Goes Here" data-artwork="artwork.jpg" data-stream="myfile.mp3" data-download="link/to/download">Add To Crate</a>

当抓取vars的数据时，（this）选择器工作正常，但是我无法获得对“a.add_mycrate”的目标（this）实例的响应中的代码。这是我遇到麻烦的一线：

jQuery('a.add_mycrate', this).html(response);

我知道我一定做错了，但我在这里四处寻找的所有事情都没有用。有什么建议吗？

P.S。与问题无关，但我使用的是“jQuery”而不是“$”，因为它是在wordpress网站上运行的，以防任何人想知道。

Answer 1

几个问题：

this回调中的

$.post不是您认为的那样。它在外部事件处理程序中具有与this不同的范围上下文。在ajax之外存储对this的引用以在其中使用

var $this = jQuery(this);
jQuery.post(myCrate.ajaxurl, data, function(response) {
        $this.html(response);
});

这也将解决以下问题：

jQuery('a.add_mycrate', this).html(response);

第二个参数是“context”。如果您假设this是元素，则context参数使其与：

相同

jQuery(this).find('a.add_mycrate');

所以你会在里面寻找元素。通过将元素引用存储在ajax之外并将html直接插入存储元素

来解决这两个问题

编辑：如何在wordpress noConflict（）中使用$而不是必须使用jQuery来处理所有内容：

jQuery(document).ready(function($){
    // can use `$` for all your code inside the ready handler
    // when you pass it in as argument
})

Answer 2

在this之前将elm放入名为post的变量中，然后更改elm的html，如下所示。

jQuery(document).ready(function(){
    jQuery(document).on('click', "a.add_mycrate", function(event) {
        event.preventDefault();

        var title = jQuery(this).attr('data-title');
        var artwork = jQuery(this).attr('data-artwork');
        var stream = jQuery(this).attr('data-stream');
        var download = jQuery(this).attr('data-download');
        var elm = this;

        var data = {
            'action': 'addToCrate',
            'security': jQuery( '#crate-nonce' ).val(),
            'podtitle' : title,
            'podartwork' : artwork,
            'podstream' : stream,
            'podsave' : download
        };                  

        jQuery.post(myCrate.ajaxurl, data, function(response) {
            jQuery(elm).html(response);
            alert(response);
        });              
    });
});

无法得到（这）jQuery选择器工作

2 个答案: