文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jquery数据-属性是随机工作的。

问jquery数据-属性是随机工作的。
EN

Stack Overflow用户
提问于 2012-12-19 10:58:16
回答 3查看 457关注 0票数 6

我有一个函数，在鼠标上调用。它检查元素现在是“拖动”还是正在编辑过程中。如果没有，则应该删除活动状态。

这就是它的样子。

代码语言：javascript
复制
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“并移动发件人时，它就完全崩溃了。

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

代码语言：javascript
复制
mouse out
edit: undefined
dragging: undefined

现在，这怎么可能？

编辑：

好的，下面是标记：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
    $(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>";

以及：

代码语言：javascript
复制
    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);
        }
    });
});
jquery
jquery-ui-sortable
EN

回答 3

Stack Overflow用户

发布于 2012-12-19 15:30:43

查找排版：

代码语言：javascript
复制
attr("data-draging")

在你代码中的其他地方

代码语言：javascript
复制
attr("data-dragging")

然而，如前所述，使用：

代码语言：javascript
复制
data("dragging")
票数 1
EN

Stack Overflow用户

发布于 2012-12-19 15:08:06

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

PS:如果您使用的是最近的jQuery版本，也要更新您的jQuery编码知识:) (例如阅读文档)

票数 0
EN

Stack Overflow用户

发布于 2012-12-19 16:36:58

代码语言：javascript
复制
console.log("dragging: " + $(this).find(".content").attr("data-draging"));

错误，需要

代码语言：javascript
复制
console.log("dragging: " + $(this).find(".content").attr("data-dragging"));

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

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

代码语言：javascript
复制
$( ".content-editor" ).attr('data-editing', 'false');

将停止更改为get事件和ui以及排序(e，ui)，并将数据拖动attr ui.item (当前拖动项)设置为false。

代码语言：javascript
复制
 stop: function(e, ui) {
        $(ui.item).find(".content").attr("data-dragging", "false");
        $(this).find(".content").attr("data-dragging", "false");

它不是将拖到false的元素设置为false，而是为正在被移动到false的元素设置它。

似乎仍然有一个问题，它进入“编辑模式”，我不确定是否模糊处理好这个事件。等我有更多的时间，我会很晚更新的。

现在大家齐心协力：

代码语言：javascript
复制
  $(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);
        }
    });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/13950837

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档