Question

所以我的rails应用程序中有一个复选框和一个段落 -

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

我想切换段落＆＃39;单击复选框

我已经写了一些Jquery函数来改变任务状态（这不是那么重要，但也许你想知道它）并切换课程 -

this

但是它改变了页面上的所有段落，所以我想起了this，但我无法弄清楚应该放在哪里{{1}}

Answer 1

<强>更新

$(".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');
});

为什么你打电话给ajax？如果你需要切换类，你不需要调用ajax

Answer 3

您需要从DOM元素中分离事件。 event是触发器，DOM元素具有自己的属性

＆＃13;

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');
  }
};

＆＃13;

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

＆＃13;

<p id="parag" class="a">This is paragraph</p><br />

checkbox: <input id="checkbox" type="checkbox"/>

＆＃13;

Answer 4

你可以试试这个。如果你需要ajax调用ajax。你在html中调用jQuery吗？

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

Jquery通过单击chekbox只更改一个段落

4 个答案: