我如何在鼠标悬停时获得元素ID并将其分配给变量

How can I get an elements ID on mouseover and assign it to a variable?

本文关键字：ID 分配 变量 元素 鼠标 悬停      更新时间：2023-09-26

我开始学习如何使用jQuery，我正在创建一个小的项目管理应用程序。在应用程序中，你可以从列表中拖动员工，并将他们放在不同的项目上，将他们分配给它。

在每个项目div中是一个我希望将员工附加到其中的ul。现在的问题是，我可以将员工添加到div中，但他们添加到ul之外。我试过设置一个变量从项目div中抓取元素id，并将其分配给一个变量。然后在appendTo()调用中将该变量连接起来，以将项目添加到正确的列表中。这就是我的问题所在。变量一直返回为[object object]。

提前感谢您的帮助。这里还有一个JSFiddle的链接。

HTML 

<ul class='employee-list'>
    <li class='employee'>Ian</li>
    <li class='employee'>Danny</li>
</ul>
<div id='task-list'>
    <div id="task-1234" class='task'>
        <h3>Design new email</h3>
        <ul id="task-1234-employees" class='tasked-employees'></ul>
    </div>
    <div id ="task-4321" class='task'>
        <h3>Update Cart Code</h3>
        <ul id ="task-4321-employees" class='tasked-employees'></ul>
    </div>
</div>
Jscript 

$(document).ready(function () {
$(function () {
    var $taskID = $('.task').mouseover(function() {return this.id;});
    $(".employee").draggable({
        revert: 'invalid'
    }, {
        snap: '.task-slot',
        snapMode: 'inner'
    }, {
        appendTo: 'body',
        helper: 'clone'
    });
    $('.task').droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            $(this).find(".placeholder").remove();
            $("<li class='task-slot'></li>").text(ui.draggable.text()).appendTo("#" + $taskID +"-employees");
        }
    });
});
});

基本上你一开始就不需要mouse over。

所需的所有信息都可以在drop方法的ui和event参数中获得。

试试这个

$(document).ready(function () {
    $(function () {
        $(".employee").draggable({
            revert: 'invalid'
        }, {
            snap: '.task-slot',
            snapMode: 'inner'
        }, {
            appendTo: 'body',
            helper: 'clone'
        });
        $('.task').droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                var employee = ui.draggable.text();
                $(this).find(".placeholder").remove();
                $("<li class='task-slot'></li>").text(employee)
                    .appendTo($(event.target).find('ul.tasked-employees'));
            }
        });
    });
});

检查小提琴

相关文章：