Question

我正在创建一个jquery插件，输出类似于提醒应用程序现在我的问题是每当我标记所有类都将被放置哪个是正确的但是一旦我试图取消标记我标记的任务只有第一个元素已删除它的类任何想法？这是我的jquery代码

//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();


    });
});

我的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>

除了任务的取消选中部分外，其他一切都有效

Answer 1

首先，我要感谢liben-m提供他/她给我的关于如何解决我的问题的提示，这就是我做的方式..虽然我不确定这是否是最有效的方式< / p>

在我逐一完成之后，我设法使用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;
            }

我添加了一个if语句，用于检查当前是否选中了某个复选框，然后在复选框中查找父级，然后删除我要删除的类

及其相关的

点击事件不会删除Jquery类

1 个答案: