Question

我有以下HTML：

<div class="ally_request_container" data-type="ally" field-id="<?=$random_id;?>">
    <span class="ally_request_label">Request</span>
    <a class="ally_request" data-type="accept" href="#">Accept</a>
</div>

我希望能够将链接data-type =“accept”更改为data-type =“remove”，并将链接文本从Accept更改为Remove，具体取决于我点击的链接，可能有100个，这就是为什么我使用父div的字段ID来定位我点击的内容。

如何查找和更改上述内容？

我有以下用于获取field-id的JSON响应：

$(document).ready(function(){
    $(".ally_request").click(function(){
        var type = $(this).parent().attr('data-type');
        var this_type = $(this).attr('data-type');
        var field_id = $(this).parent().attr('field-id');
        var find = $("div").find("[field-id='" + field_id + "']");
        var position = find.position();

        alert('Type '+type);
        alert('This Type '+this_type);
        alert('Field ID '+field_id);
        alert('Find '+find);
        alert('Position '+position);

        switch(type){
            case 'ally':
                switch(this_type){
                    case 'accept':
                    $.getJSON('json.php', {action:'ally.accept',ally_id:field_id}, function(response){
                        if(response.status == 200){
                            var result = response.message;

                            //To reset the title and link data type
                            //change link data-type and text here
                        }
                        else{
                            alert(response.message);
                        }
                    });
                    break;
                    default:
                        alert('Unknown Accept Result.');
                    break;
                }
            break;
            default:
                alert('Unknown Search Result.');
            break;
        }
        return false;
    });
});

Answer 1

由于成功处理程序的执行上下文不同，因此不能在成功处理程序中使用this引用，而是使用闭包变量。

尝试

$(document).ready(function () {
    $(".ally_request").click(function () {
        var $this = $(this),
            $parent = $this.parent();

        var type = $parent.attr('data-type');
        var this_type = $this.attr('data-type');
        var field_id = $parent.attr('field-id');
        var find = $("div").find("[field-id='" + field_id + "']");
        var position = find.position();

        alert('Type ' + type);
        alert('This Type ' + this_type);
        alert('Field ID ' + field_id);
        alert('Find ' + find);
        alert('Position ' + position);

        switch (type) {
            case 'ally':
                switch (this_type) {
                    case 'accept':
                        $.getJSON('json.php', {
                            action: 'ally.accept',
                            ally_id: field_id
                        }, function (response) {
                            if (response.status == 200) {
                                var result = response.message;

                                $this.attr('data-type', 'remove').text('Remove')
                                //To reset the title and link data type
                                //change link data-type and text here
                            } else {
                                alert(response.message);
                            }
                        });
                        break;
                    default:
                        alert('Unknown Accept Result.');
                        break;
                }
                break;
            default:
                alert('Unknown Search Result.');
                break;
        }
        return false;
    });
});

Answer 2

在点击处理程序代码中添加：

$(this).attr('data-type', 'remove');

Answer 3

试试这个

将选择器添加到元素然后访问

<a id="test" class="ally_request" data-type="accept" href="#">Accept</a>

更改数据类型

$('#test').data('type','remove');

更改文字

$('#test').text('Remove');

如何在给定的div jQuery中找到特定的链接

3 个答案: