Question

我的页面上有12个元素（但是下面我只编写了3个代码）。单击一个时，另一个11消失（使用名为'spinOut'的动画）。我希望在悬停时将元素的id分配给$test变量，然后在$test（元素悬停在）上，而不是为每个单独的元素单击运行代码。点击，我的代码将执行该元素。因此，我只需要写出一个将应用于$test的代码块，这意味着它将应用于已被点击的任何元素。

我试图在.hover（）函数内为变量$ test赋值，然后在外面使用它。我发现很多帖子都有人遇到类似的问题，但解决问题的解决方案都没有帮助我。我想知道如何在.hover（）函数中分配$test变量，然后在外面使用它。

$(document).ready(function () {
    var $test;

    $("#M").hover(function () {
        $test = "#M";
    });
    $("#N").hover(function () {
        $test = "#N";
    });
    $("#O").hover(function () {
        $test = "#O";
    });

    //When I define variable value here it works
    $($test).click(function () {
        $(".pageItem:not("+$test+")").addClass("spinOut");
    });
});

Answer 1

这是我如何让它发挥作用。我页面上的12个元素，其中包含＆＃34; .pageItem＆＃34;类。我不必在$().click中指定特定元素 - 我只需要在任何.pageItem上运行代码，然后使用函数内的$test变量来定位.pageItem已被点击。代码将应用于我最后一次悬停的元素 - 无法单击其中一个元素而不首先悬停在它们上面。

$("#M").hover(function () {
    $test = "#M";
});
$("#N").hover(function () {
    $test = "#N";
});
$("#O").hover(function () {
    $test = "#O";
});
$(.pageItem).click(function () {
    $(".pageItem:not("+$test+")").addClass("spinOut");
});

但是，有一种更简单，更合乎逻辑的方式来做我需要的事情。而不是使用我最后一次悬停的.pageItem的id填充$test并使用它来指定我点击的内容，而是将$(this).attr("id")分配给.click（）函数内的$test像这样：

$(.pageItem).click(function () {
    $test = $(this).attr("id");
    $(".pageItem:not("+$test+")").addClass("spinOut");
});

Answer 2

你不能这样做，因为在设置触发器时单击元素不存在（因为它是空的）。一种方法：

 $(document).ready(function () {
        var $test = '';
        $("#M").hover(function () {
            $test = "#M";
        });

        $(document).on('click', $test, (function () {
            if ($test)
               console.log($test);
        });
});

编辑：另一种方法：

 $(document).ready(function () {
        var $test = '';
        $("#M").hover(function () {
            // for future use if needed
            $test = "#M";

            $(this).unbind('click').click(function () {
               console.log($test);
            });
        });
});

Answer 3

$(document).ready(function () {
    $("#M").hover(function () {
        $test = "#M";
        eventClick($test, function() { console.log($test); });
    });

    var eventClick=function(ele, f) {
        $(ele).unbind('click');
        $(ele).click(f);
    };

});

Answer 4

听起来您只想将点击处理程序附加到您悬停的元素上。有很多方法可以做到这一点。这是一个：

    $(document).ready(function () {
        $('.clickable').on('mouseenter', function () {
            $(this).data('can-click', true);
        }).on('mouseleave', function () {
            $(this).data('can-click', false);
        });
        $(document).on('click', function (e) {
            var currentTarget = $(e.target);
            if (currentTarget.data('can-click')) {
                 console.log('clicked');
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="M" class="clickable">M</div>
<div id="O">O</div>

从技术上讲，这会侦听整个文档上的任何点击事件，但只会对正在盘旋的事件做出反应。它的工作原理是将“可点击”的元素标记为仅在悬停时单击可用。当用户单击时，代码会在继续代码之前检查该标记。

Answer 5

假设您的可点击项目是“按钮”类型的“输入”，您可以做这样的事情。

$(document).ready(function () {
    var $test = '';
    $("#M").hover(function () {
        $test = "#M";
    });

    $("input[type=button]").on('click', function (e) {
        console.log($test);
    });
});

如果我的假设不正确，那么这种可能的解决方案可能无效或可能需要更改。

只是一个想法

将元素的id分配给.hover（）上的变量，以便在点击事件

5 个答案: