方法 .children()length 在函数内部和外部的行为不同

Question

这是我在 jQuery 中的代码。我有一个按钮 (class = "trail")，以及一个带有 class="cell" 的 div 网格。如果当前单元格没有内部 div，我会向其附加一个。否则，我会淡入它拥有的那个。

一切正常。但是当我尝试将这段代码放在一个单独的函数中时，变量 divnum 出于某种原因给我的结果是 2（在我第一次输入的单元格上，所以它应该是 0，而不是 2）。

如果代码在函数外，divnum只能等于0或1

任何人都可以向我解释当我将代码放在 var MyFunction = function(){};

中时这个 divnum=2 是从哪里来的

"Alert"我只是用来调试的

$('#trail').on('click', function(){ //when i press this button
    $('.cell').mouseenter(function(){
        divnum = $(this).children().length; //check if the div i enter has inner divs in it
        if (divnum == 0) {
            alert('divnum')
            $(this).append('<div class="fade"></div>');} //if not - add a div
        else {
            //alert(divnum)
            $(this).children().fadeIn(10); //if it has children, fade them in
        }
        $('.fade').width(CellSize).height(CellSize); //giving a size to the div that was appended
        $('.fade').mouseleave(function(){
            $(this).fadeOut(1000); //fade out the appended div
        });

    });
});

Answer 1

您的问题是 Javascript 中对 this 的引用。在 jQuery 事件中，它将被设置为正确的 DOM 元素。检查这是否有效：

function process( reference ) {
    divnum = $(reference).children().length; //check if the div i enter has inner divs in it
    if (divnum == 0) {
        alert('divnum')
        $(reference).append('<div class="fade"></div>');} //if not - add a div
    else {
        //alert(divnum)
        $(reference).children().fadeIn(10); //if it has children, fade them in
    }
    $('.fade').width(CellSize).height(CellSize); //giving a size to the div that was appended
    $('.fade').mouseleave(function(){
        $(reference).fadeOut(1000); //fade out the appended div
    });
}
$('#trail').on('click', function(){ //when i press this button
    $('.cell').mouseenter(function(){
        process( this );
    });
});

方法 .children()length 在函数内部和外部的行为不同

Method .children()length behave differently inside and outside of a function

jquery

children

function