Question

jQuery('ul#reorderps ul ul li').mouseover(
    function(){
    jQuery(this).css("cursor","pointer");
    var position=   jQuery(this).position();

        jQuery("#up").click(function() {
            alert('hey');
        });
    }

    );

我希望当我将鼠标悬停在该特定元素上时，它会发出“hey”警报。但它适用于所选择的li的大小。什么是错的，我该如何解决它。实际上，当我点击向上id按钮时，我必须拿起鼠标所在的元素。

这里是html片段，它实际上我很长，所以只发布了一部分。


<ul id="reorderps">
<li>Financial</li>
<ul>
    <li>Hardware</li>
        <ul>
            <li>Product 1</li>
            <li>Product 2</li>
            <li>Product 3</li>
            <li>Product 4</li>
            <li>Product 5</li>
            <li>Product 6</li>
            <li>Product 7</li>
            <li>Product 8</li>
        </ul>
    <li>Software</li>

Answer 1

您正在鼠标悬停事件上绑定点击事件。我想你想要这个：

jQuery('ul#reorderps ul ul li').mouseover(function(){
    jQuery(this).css("cursor","pointer");
    var position=   jQuery(this).position();
    alert("MOUSEOVER");
});

jQuery("#up").click(function() {
    alert('hey');
});

现在，如果您点击div #up，它会提醒hey并在LI mouseover上显示mouseover。如果你想在LI的元素上有一个click事件。执行以下操作：

jQuery('ul#reorderps ul ul li').mouseover(function(){
    jQuery(this).css("cursor","pointer");
    var position=   jQuery(this).position();
    alert("MOUSEOVER");
})
.find("#up").click(function(){
    alert("hey");
});

<强> EDITED

每个LI上下都有一个按钮？然后你可以这样做

var lastHoveredLI = null;

jQuery('ul#reorderps ul ul li').mouseover(function(){
    jQuery(this).css("cursor","pointer");
    var position=   jQuery(this).position();
    lastHOveredLI = this;
});

jQuery("#up").click(function(){
    var li = $(lastHoveredLI);
});

jQuery("#down").click(function(){
    var li = $(lastHoveredLI);
});

Answer 2

如果我正确理解了问题和问题，那么你就错过了一个LI

它说：jQuery('ul#reorderps ul ul li')

在这里虐待数字

<ul id="reorderps">1
<li>Financial</li>2
<ul>2
    <li>Hardware</li>3
        <ul>4
            <li>Product 1</li>5
            <li>Product 2</li>5
            <li>Product 3</li>5
            <li>Product 4</li>5
            <li>Product 5</li>5
            <li>Product 6</li>5
            <li>Product 7</li>5
            <li>Product 8</li>5
        </ul>
    <li>Software</li>

所以我认为你需要的是：

jQuery('ul#reorderps(1) ul(2) li(3)ul(4) li(5)')

4是LI硬件的子代，而不是您在函数中跳过的另一个UL的直接子代。不确定它是否有任何区别，但也许有点帮助：）

鼠标悬停的jQuery逻辑问题

2 个答案: