Question

我有ul。当我将鼠标悬停在列表中的任何li上时，我正在做一些事情，而在mouseleave上，我想做其他一些事情。我还在使用jQuery。

问题出现在mouseleave事件发生的最后。我基本上想要撤消.hover事件执行的.append（）...

//for each li in #mylist...
$('#myList > li').each(function () {

    //get the li content...
    var liName = $(this)[0].innerText;

    //instantiate number
    var number;

    //instantiate formattedNumber
    var formattedNumber;

    //when hover over each li...
    $(this).hover(function () {

        //get a number from the div where liName is found...
        $('.square').each(function () {

            var name = $(this).find('tr:eq(0)').find('td').text();

            if (name === liName) {

                number = $(this).find('tr:eq(6)').find('td').text();

            }

        })

        //format the number...
        formattedNumber = ': ' + number.substring(0, 3) + '-' + number.substring(3, 6) + '-' + number.substring(6, 10)

        //append the formatted number to this li...
        $(this).append(formattedNumber);

        //when mouse leaves the li, remove the formatted number...
    }, function () {

        //this is what I cannot get working. I basically want to do the opposite on mouseleave and remove the just appended text...but leave the initial content of the li in place

    })

})

Answer 1

您可以在元素中包含附加文本，以便以后更容易删除它：

//for each li in #mylist...
$('#myList > li').each(function () {

    //get the li content...
    var liName = $(this)[0].innerText;

    //instantiate number
    var number;

    //instantiate formattedNumber
    var formattedNumber;

    //when hover over each li...
    $(this).hover(function () {

        //get a number from the div where liName is found...
        $('.square').each(function () {

            var name = $(this).find('tr:eq(0)').find('td').text();

            if (name === liName) {

                number = $(this).find('tr:eq(6)').find('td').text();

            }

        });

        //create a span and set its text to as format the number...
        formattedNumber = $('<span />').text(': ' + number.substring(0, 3) + '-' + number.substring(3, 6) + '-' + number.substring(6, 10));

        //append the formatted number to this li...
        $(this).append(formattedNumber);

        //when mouse leaves the li, remove the formatted number...
    }, function () {

        //remove the created span
        formattedNumber.remove();

    });

});

在mouseleave事件中删除<li>中的文本

1 个答案: