Как правильно назвать эту функцию в 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"); 
    } 
}