javascript - 如何在Ajax中正确调用这个函数？

Question

我有这个代码:

function changeEventStatusClass(object){
    if ($(object).hasClass("fa-circle")) {
        $(object).removeClass("fa-circle").addClass("fa-circle-o");
        //alert("adevarat");
    } else {
        $(object).removeClass("fa-circle-o").addClass("fa-circle");
    }
}

function changeEventStatus(eventId, status) {
    console.log(eventId, status);
    $.ajax({
        type:'POST',
        data: {
            eventId: eventId,
            status: status,
        },
        url: "<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/ajaxupdateappointmentstatus'; ?>",
        success: function (result) {
            if (result.success) {
                console.log(eventId);
                changeEventStatusClass(eventId); //here is problem
            }
        }
    });
}

$(".crad").on('click', function(){
    var eventId = $(this).attr('data-id');
    var completed = ($( this ).hasClass("fa-circle-o")) ? true : false;
    console.log(completed);
    if (completed) {
        changeEventStatus(eventId, 7);
    } else {
        changeEventStatus(eventId, 0);
    }
})

<i class="fa fa-circle-o circle crad" data-id="241"></i>
<i class="fa fa-circle-o circle crad" data-id="242"></i>
<i class="fa fa-circle-o circle crad" data-id="243"></i>
<i class="fa fa-circle-o circle crad" data-id="244"></i>

当我尝试调用函数 changeEventStatusClass 时遇到问题，因为它不是参数 ID(它是 data-id)；

如何正确排序才能实现此功能？目前该网站正在更改所有按钮的类别，我只想要当前的按钮

你能帮我解决这个问题吗？

提前致谢!

Answer 1

您可以使用Attribute Equals Selector [name=”value”] ，此外您还可以使用.toggleClass()添加或删除类。

function changeEventStatusClass(object){
    $("[data-id='"+object+"']").toggleClass("fa-circle-o fa-circle");
}

但是更好的方法是传递对象，例如

function changeEventStatusClass(element){
    element.toggleClass("fa-circle fa-circle-o");
}

function changeEventStatus(element, status) {
    $.ajax({
        type:'POST',
        data: {
            eventId: element.attr('data-id'),
            status: status,
        },
        url: "<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/ajaxupdateappointmentstatus'; ?>",
        success: function (result) {
            if (result.success) {
                console.log(eventId);
                changeEventStatusClass(element); //here is problem
            }
        }
    });
}

$(".crad").on('click', function(){
    var element = $(this);
    var eventId = element.attr('data-id');
    var completed = element.hasClass("fa-circle-o");
    if (completed) {
        changeEventStatus(element, 7);
    } else {
        changeEventStatus(element, 0);
    }
})