如何在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);
    }
})

Answer 2

基本上，您需要选择通过传递其data-id属性值的元素

object = $( "[data-id='" + object + "']" ); //this line is added

将此方法更改为

function changeEventStatusClass(object) {
    object = $("[data-id='" + object + "']"); //this line is added
    if ($(object).hasClass("fa-circle")) {
        $(object).removeClass("fa-circle").addClass("fa-circle-o");
        //alert("adevarat");
    } else {
        $(object).removeClass("fa-circle-o").addClass("fa-circle");
    }
}