JQuery Änderung nur einen Absatz durch die chekbox klicken

Question

So habe ich eine Checkbox und einen Absatz in meine Schienen-app -

<li class="task" id="task_<%= task.id %>" > 
    <%= check_box_tag task.id, task.id, task.mark, class: "task-check" %> 
    <label for=<%=task.id %> ></label> 
    <p><%= task.content %></p> 

Und ich möchte auf das Kontrollkästchen, indem Sie auf den Absätzen Klasse wechseln

I habe einige Jquery Funktion schreiben Aufgabenstatus ändern (das nicht so wichtig ist, aber vielleicht werden Sie es wissen wollen) und die Klasse zu wechseln -

$(".task-check").on('click', function(){ 
     $.ajax({ 
     url: '/tasks/'+this.value+'/mark', 
     type: 'POST', 
     data: {"mark": this.checked} 
     }); 
     $('p').toggleClass('done') 
    }); 

aber es ändert sich alles Absatz auf der Seite, s o Ich vermisse this, wie ich glaube, aber ich kann nicht herausfinden, wo soll ich this

Answer 1

Aktualisiert

$(".task-check").on('change', function(){ 
    // always cache the element, this increase the performance, 
    // also in javascript, `this` is too tricky and may change inside blocks 
    // so by caching, you can always trust chached item 
    var $this = $(this); 

    $.ajax({ 
     url: '/tasks/'+ $this.val() +'/mark', 
     type: 'POST', 
     data: {"mark": $this.is(':checked') } 
    }); 

    $this.next().toggleClass('done'); 
    // OR if `p` isn't next item (if so, maybe you should add `class` to p, 
    // so you can find that easily) 
    // $this.parent().find('p.MY-CLASS').toggleClass('done'); 
}); 

Answer 2

$(".task-check").on('click', function(){ 
    $(this).next('p').toggleClass('done'); 
}); 

setzen Warum Sie Ajax-Aufruf? wenn Sie wechseln Klasse benötigen, müssen Sie nicht Ajax

Answer 3

Sie nennen dies versuchen. Wenn Sie Ajax Call Ajax benötigen. nennen Sie jQuery oben in HTML?

$(".task-check").on('change', function(){ 
    if($(this).is(':checked')){ 
    $(this).next('p').addClass('done'); 
    }else{ 
    $(this).next('p').removeClass('done'); 
    } 
}); 

Answer 4

Sie müssen das Ereignis aus dem DOM-Elemente zu trennen. Ereignis ist der Auslöser, und das DOM-Element hat seine eigenen Eigenschaften

var A = window, 
 
    B = document, 
 
    a = function(a){return B.getElementById(a);}; 
 
    
 
a('checkbox').onclick = function(){ 
 
    if(this.checked === true){ 
 
    a('parag').setAttribute('class','b'); 
 
    } else { 
 
    a('parag').setAttribute('class','a'); 
 
    } 
 
};

.a{color:#000;} 
 
.b{color:blue;}

<p id="parag" class="a">This is paragraph</p><br /> 
 

 
checkbox: <input id="checkbox" type="checkbox"/>