jquery - jquery 数据属性随机工作

Question

我有一个在鼠标移出时调用的函数。它检查元素现在是否被“拖动”或正在编辑。如果不是，它应该删除活动状态。

这就是它的外观。

function onMouseOut() {
        console.log("mouse out");
        if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
                console.log("no edit, no dragging");
                removeActive($(this).find(".content"));
        } else {
                console.log("edit: " + $(this).find(".content").attr("data-editing"));
                console.log("dragging: " + $(this).find(".content").attr("data-draging"));
        }
}

该元素位于可排序的内部。它不会破坏上面的代码，我可以根据需要对其进行多次排序。但是当我添加“connectWith”并转移发件人时，它完全崩溃了。

然后我到控制台的输出如下：

mouse out
edit: undefined
dragging: undefined

现在，这怎么可能？

编辑：

好的，标记来了：

<div id="body">
    <section class="main_1 grid_8 field" data-field='main_1'>
        <div class='module'>
        <div class="content content-editor" data-id='1' data-module='content' contenteditable='true'>
            <h1>Heading 1</h1><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
        </div>
            <div class='module'>
        <div class="content content-editor" data-id='4' data-module='content' contenteditable='true'>
            <h4>Yet another content</h4><p>This is yet another contentblock!</p>
        </div>
        </div>
    </section>
    <aside class="aside_1 grid_4 field" data-field='aside_1'>
        <div class='module'>
        <div class="content content-editor" data-id='2' data-module='content' contenteditable='true'>
            <h2>Aside Content</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        </div>
    </aside>
    <div class="x-clear"></div>
</div>

这是js：

    $(document).ready(function() {
    /*
    * - on hoover, we display the panel
    */
    $( ".content-editor" ).mouseenter(onMouseIn);
    $( ".edit-wrap" ).live("mouseleave", onMouseOut);

    /*
    * - on click/focus, we set it as active
    */
    $( ".content-editor" ).focus(onFocus);
    $( ".content-editor" ).blur(onLostFocus);
});


/*
* - functions
*/
function onMouseIn() {
    if ($(this).attr('data-active') != "true" && !dragging) {
        console.log("wasnt active: " + $(this).attr('data-active'));
        makeActive($(this));
    } else {
        console.log("was active: " + $(this).data('id') + " - act: " + $(this).attr('data-active'));
    }
}
function onMouseOut() {
    console.log("mouse out");
    if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
        console.log("no edit, no dragging");
        removeActive($(this).find(".content"));
    } else {
        console.log("edit: " + $(this).find(".content").attr("data-editing"));
        console.log("dragging: " + $(this).find(".content").attr("data-draging"));
    }
}
function onFocus() {
    $(this).attr('data-editing', 'true');
}
function onLostFocus() {
    console.log("lost focus: " + $(this).data('id'));
}
function makeActive($this) {
    $this.attr('data-active', "true");

    $this.wrap("<div class='edit-wrap'>");
    var $parent = $this.parent(".edit-wrap");

    $parent.prepend("<div class='edit-head'>&raquo; Content ( Quick Edit )</div>");
    $parent.append(editMenu);
}
function removeActive($this) {
    $this.parent(".edit-wrap").find(".edit-head").remove();
    $this.parent(".edit-wrap").find(".edit-menu").remove();

    $this.unwrap(".edit-wrap");
    $this.attr('data-active', "false");
}


/*
* - html
*/
var editMenu = "<div class='edit-menu'>"+
        "<a href='#' class='btn openEditor'>Öppna Editor</a>"+
        "<a href='#' class='btn quicksave'>Snabspara</a>"+
        "</div>";

和：

    var dragging = false;

$(document).ready(function() {
    /*
    $( ".edit-head" ).live("mouseover", function() {
        $(this).parent(".edit-wrap").draggable({
            handle: ".edit-head",
            revert: 'invalid'
        }); 
    });

    $( ".edit-wrap" ).live("dragstart", function() {
        $(this).find(".content").attr("data-dragging", "true");
    });
    $( ".edit-wrap" ).live("dragstop", function() {
        $(this).find(".content").attr("data-dragging", "false");
        removeActive($(this).find(".content"));
    });
    */

    $( ".field" ).sortable({
        start: function(e, ui) {
            ui.placeholder.height(ui.item.height());
            $(this).find(".content").attr("data-dragging", "true");
            dragging = true;

            $(".field").addClass("target");

        },
        stop: function() {
            $(this).find(".content").attr("data-dragging", "false");
            dragging = false;

            $(".field").removeClass("target");
        },
        connectWith: '.field',
        placeholder: "drop-placeholder",
        dropOnEmpty: true,
        handle: ".edit-head",

        update: function(e, ui) {
            var $this   = ui.item;
            var $sender = ui.sender;

            if ($sender) {
                //vi bytte field
                console.log("bytte");
            } else {
                console.log("bytte inte");
            }
            console.log("change: " + $this + " from: " + $sender);
        }
    });
});

Answer 1

寻找错别字：

attr("data-draging") 

以及代码中的其他地方

attr("data-dragging") 

但是如上所述，使用：

data("dragging") 

Answer 2

我建议您尽可能多地继续使用数据属性，并保留 class'es 主要用于样式但访问数据属性：

$selector.data("name")

方法而不是

$selector.attr("data-name")

Answer 3

console.log("dragging: " + $(this).find(".content").attr("data-draging"));

错字，应该是

console.log("dragging: " + $(this).find(".content").attr("data-dragging"));

这就是为什么您在控制台中得到未定义的原因。

如果从未设置过 onMouseOut 中的“数据编辑”属性检查，则可能未定义。我默认为假。您可能希望它默认 HTML 元素中的值，或者您可能希望在 if 语句中检查 undefined。

$( ".content-editor" ).attr('data-editing', 'false');

更改停止以获取事件和 ui 以及 sort(e,ui) 并将数据拖动 attr ui.item（当前拖动项）设置为 false。

 stop: function(e, ui) {
        $(ui.item).find(".content").attr("data-dragging", "false");
        $(this).find(".content").attr("data-dragging", "false");

它没有将您拖动的元素设置为 false，它似乎是为正在移动到 false 的元素设置它。

进入“编辑模式”似乎仍然存在问题我不确定模糊是否能很好地处理这个事件。当我有更多时间时，我会晚点更新。

现在都在一起了：

  $(document).ready(function() {
    /*
    * - on hoover, we display the panel
    */
    $( ".content-editor" ).mouseenter(onMouseIn);
    $( ".content-editor" ).attr('data-editing', 'false');
    $( ".edit-wrap" ).live("mouseleave", onMouseOut);

    /*
    * - on click/focus, we set it as active
    */
    $( ".content-editor" ).focus(onFocus);
    $( ".content-editor" ).blur(onLostFocus);
});


/*
* - functions
*/
function onMouseIn() {
    if ($(this).attr('data-active') != "true" && !dragging) {
        console.log("wasnt active: " + $(this).attr('data-active'));
        makeActive($(this));
    } else {
        console.log("was active: " + $(this).data('id') + " - act: " + $(this).attr('data-active'));
    }
}
function onMouseOut() {
    console.log("mouse out");
    if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
        console.log("no edit, no dragging");
        removeActive($(this).find(".content"));
    } else {
        console.log("edit: " + $(this).find(".content").attr("data-editing"));
        console.log("dragging: " + $(this).find(".content").attr("data-dragging"));
    }
}
function onFocus() {
    $(this).attr('data-editing', 'true');
}
function onLostFocus() {
    console.log("lost focus: " + $(this).data('id'));
    //$(this).attr('data-editing', 'false');
}
function makeActive($this) {
    $this.attr('data-active', "true");

    $this.wrap("<div class='edit-wrap'>");
    var $parent = $this.parent(".edit-wrap");

    $parent.prepend("<div class='edit-head'>&raquo; Content ( Quick Edit )</div>");
    $parent.append(editMenu);
}
function removeActive($this) {
    $this.parent(".edit-wrap").find(".edit-head").remove();
    $this.parent(".edit-wrap").find(".edit-menu").remove();

    $this.unwrap(".edit-wrap");
    $this.attr('data-active', "false");
}


/*
* - html
*/
var editMenu = "<div class='edit-menu'>"+
        "<a href='#' class='btn openEditor'>Öppna Editor</a>"+
        "<a href='#' class='btn quicksave'>Snabspara</a>"+
        "</div>";


  var dragging = false;

$(document).ready(function() {
    /*
    $( ".edit-head" ).live("mouseover", function() {
        $(this).parent(".edit-wrap").draggable({
            handle: ".edit-head",
            revert: 'invalid'
        });
    });

    $( ".edit-wrap" ).live("dragstart", function() {
        $(this).find(".content").attr("data-dragging", "true");
    });
    $( ".edit-wrap" ).live("dragstop", function() {
        $(this).find(".content").attr("data-dragging", "false");
        removeActive($(this).find(".content"));
    });
    */

    $( ".field" ).sortable({
        start: function(e, ui) {
            ui.placeholder.height(ui.item.height());
            $(this).find(".content").attr("data-dragging", "true");
            dragging = true;

            $(".field").addClass("target");

        },
        stop: function(e, ui) {
            $(ui.item).find(".content").attr("data-dragging", "false");
            $(this).find(".content").attr("data-dragging", "false");

            dragging = false;

            $(".field").removeClass("target");
        },
        connectWith: '.field',
        placeholder: "drop-placeholder",
        dropOnEmpty: true,
        handle: ".edit-head",

        update: function(e, ui) {
            var $this   = ui.item;
            var $sender = ui.sender;

            if ($sender) {
                //vi bytte field
                console.log("bytte");
            } else {
                console.log("bytte inte");
            }
            console.log("change: " + $this + " from: " + $sender);
        }
    });
});

Answer 4

一方面，我建议不要使用数据属性重载您的 HTML，而是使用默认属性，例如id和class（例如，对于活动/拖动状态）。其次，您在一直使用时编写非常慢的代码$(this).find()，您可以在 jQuery 中提供选择器的上下文，还可以缓存您的对象/数据：var $content = $('.content', this);。这使您的代码更清晰（$(this).is('.active')而不是检查数据活动字符串），甚至可能解决编码错误。

PS：如果您使用最新的 jQuery 版本，请同时更新您的 jQuery 编码知识 :)（例如阅读文档）