2016-05-31 12 views
0

Привет, Im, создающий плагин jquery, результат похож на приложение напоминания теперь моя проблема - всякий раз, когда я отмечаю все, что классы будут размещены правильно, но как только я попробую чтобы отменить задачи, отмеченные только 1-м элементом, его классы удалили какую-либо идею? вот мой JQuery кодJquery Classes не удаляются при событии click

//iterator for General Matters's todo 
$.fn.iteratethis = function() { 
    this.find("li").each(function(index) { 
     var roots = $(this); 
     console.log(index + ": " + $(this).text()); 
     $(this).find(".tsk").on("click", function() { 
      $(roots).not(document.getElementById("not-data")).addClass("strikeit hide"); 
      if ($(roots).hasClass('tmpReveal')) { 
       $(roots).removeClass('tmpReveal strikeit hide'); 
      } 
     }); 
    }); 
    return this; 
} 

//Shows finished Todo 
$.fn.showme = function() { 
    this.on("click", function() { 
     if ($(this).is(':checked')) { 
      $('#task_list').find("li.hide").removeClass('hide').addClass('tmpReveal'); 
     } else { 
      $('#task_list').find("li.tmpReveal").removeClass('tmpReveal').addClass('hide'); 
     } 
    }); 
    return this; 
} 
$('#GeneralMattersLink').on("click", function() { 
    $('#GeneralMatters').siblings().hide(); 
    $('#GeneralMatters').toggle("fast", function() { 
     $(this).removeClass("hide"); 
     //Modal for the New TODO 
     $('#new_task').on("click", function() { 
       $('#add_new_task').modal('show'); 
      }) 
      //Save button for the todo 
     $('#addnewtodo').on("click", function() { 
      var ai = $('#task_list').children("li").length; 
      $('ul#task_list').prepend("<li class='list-group-item'><div class='tbl-r'> \n\n\ 
<div class='tbl-c'><div class='checkbox_round'><input type='checkbox' \n\n\ 
name='check[]' id=" + ai + " class='tsk' value=''/><label for=" + ai + "></label></div></div><div \n\n\ 
class='tbl-c'><p>" + $("#new_todo").val() + "</p></div></div></li>"); 

      $('#new_todo').val(""); 
      $(this).modal('hide'); 
      $('ul#task_list').iteratethis(); 
     }); 

     $('ul#task_list').iteratethis(); 
     $('#sfsh').showme(); 


    }); 
}); 

MY HTML

<div class="panel panel-default"> 
          <!-- Default panel contents --> 
          <div class="panel-heading bold">General Matters <span id="new_task" class="glyphicon glyphicon-plus pull-right" aria-hidden="true"></span></div> 
          <!-- List group --> 
          <ul id="task_list" class="list-group todopanel"> 
    </ul> 
    </div> 

модальные

 <div class="modal fade" id="add_new_task" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="myModalLabel">New Todo</h4> 
       </div> 
       <div class="modal-body"> 
        <!--form --> 
        <form id='winebeerForm' class="form-horizontal"> 
         <!-- Text input--> 
         <input type="text" name="new_todo" id="new_todo" class="form-control" placeholder="New Todo" /> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" id="addnewtodo" class="btn btn-primary" data-dismiss="modal" >Save</button> 
        <!--/ from --> 
       </div> 
      </div> 
     </div> 
    </div> 

все остальное работает на Непроверка часть задачи

+1

Binding click handler внутри обработчик кликов не круто. – Satpal

+0

Возможно, это происходит потому, что все элементы не имеют всех классов 'tmpReveal strikeit hide'' –

+0

и почему вы используете $ (корни). Он не равен $ (this), потому что корни не равны этому, но он равен $ (this). Таким образом, вы должны использовать только корни, а не $ (корни) –

ответ

0

1, за исключением всех я wou Я хотел бы поблагодарить freedomn-m за советы, которые он мне дал, о том, как я могу решить свою проблему, и вот как я это сделал. Хотя я не уверен, что это самый эффективный способ

после того, как я это сделал один за другим, мне удалось заставить его работать, используя 1 функцию, имя функции, что я редактировал был iteratethis

новый код стал как этот

 $.fn.iteratethis = function() { 
       this.find("li").not(document.getElementById("not-data")).each(function (index) { 
        index++; 
        console.log(index + ": " + $(this).text()); 
        $("#" + index).on("click", function() { 
        //newcode added 
        if (!($(this).is(":checked"))) { 
          $(this).parent().closest('li').removeClass("strikeit tmpReveal hide"); 
         } else { 
          $(this).parent().closest('li').addClass("strikeit hide"); 
         } 
        }); 

       }); 
       return this; 
      } 

Я добавил, если заявление, что проверяет, что определенный флажок в настоящее время Затем я установил флажок, чтобы посмотреть родительский, а затем удалить класс, который я хочу удалить.

и вот об этом

Смежные вопросы