Question

有人可以帮我解决这个问题，由于某些原因，在页面加载时，按钮似乎都处于“开启”位置，即使我有一个“已选中”复选框而另一个未选中。

问题似乎出现在initialize_slideCheck（）的if / then中。我想我在滥用下一个（）???

如何仅定位与复选框位于同一div中的.checkboxTrigger？

任何帮助表示赞赏！


$(document).ready(function(){

                function initialize_slideCheck(){
                    var slideCheck = $('.slideCheck');

                    slideCheck.wrap("");
                    slideCheck.after("");

                    slideCheck.attr('style', 'display:block;');

                    if(slideCheck.is(':checked')){
                        $(this).next(".checkboxTrigger").css("left", "-8px");
                    }else if(slideCheck.not(':checked')){
                        $(this).next(".checkboxTrigger").css("left", "-40px");
                    } 

                }

                initialize_slideCheck();

                $(".checkboxTrigger").click(function(){

                    var position = $(this).position().left;

                    if(position == -8){
                        $(this).animate({"left": "-40px"}, 200);
                        $(this).prev('.slideCheck').attr('checked', '');
                    }
                    else if(position == -40){
                        $(this).animate({"left": "-8px"}, 200);
                        $(this).prev('.slideCheck').attr('checked', 'checked');
                    }

                });

            });

Answer 1

这应该可以解决问题。如果集合中的任何元素与选择器匹配，则is()会返回true。在这种情况下，'：checked'条件将始终为eval。

function initialize_slideCheck() {
    $('.slideCheck')
        .wrap("<div class='checkboxWrapper rounded'></div>")
        .after("<a class='checkboxTrigger' href='#'></a>")
        .css({'display':'block'})
        .each(function(){
            var $this = $(this);
            if ( $this.is(':checked') ) {
                $this.nextAll('.checkboxTrigger').css({'left':'-8px'});
            } else {
                $this.nextAll('.checkboxTrigger').css({'left':'-40px'});
            }
        })
}

修改

另外，checkboxTrigger元素上的click处理程序没有正确“检查”复选框。将.attr('checked', '')替换为.attr('checked', false)

Answer 2

next()选择下一个兄弟。请改用nextAll('selector')。您可以查看nextAll() here上的完整手册。 prev()也是如此。请改用prevAll()。您可以阅读该手册here。

Answer 3

在没有看到HTML的情况下很难确定，但在我看来，问题在于你的$（this）.next（...）方法在initialize_slideCheck方法中调用。此时此是文档，因此next（）将不会获取slideCheck旁边的元素。我想你可能要做的是：

function initialize_slideCheck(){
    ...
    if(slideCheck.is(':checked')){
        slideCheck.next(".checkboxTrigger").css("left", "-8px");
    } else if(slideCheck.not(':checked')){
        slideCheck.next(".checkboxTrigger").css("left", "-40px");
    }
}

注意从$（this）.next到slideCheck.next的更改。

初始化问题

3 个答案: