Question

这是我在jQuery中的代码。我有一个按钮（class =“trail”），以及一个带有class =“cell”的div网格。如果当前单元格没有内部div，我会附加一个。否则，我会褪色它。

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

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

当我将代码放入var MyFunction = function(){};

时，有人可以向我解释这个divnum = 2的来源吗？

“警报”我只是用于调试。

$('#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（）长度在函数内部和外部表现不同

1 个答案: