jquery - jquery data-attribute はランダムに動作します

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);
        }
    });
});

score 1 · Accepted Answer

タイプミスを探します：

attr("data-draging")

そしてあなたのコードのどこか

attr("data-dragging")

ただし、前述のように、次を使用します。

data("dragging")

score 0 · Accepted Answer

id1つには、HTMLをデータ属性でオーバーロードするのではなく、 andなどのデフォルト属性を使用することをお勧めしますclass（たとえば、アクティブ/ドラッグ状態の場合）。次に、常に使用するときに非常に遅いコードを記述します$(this).find()。jQueryでセレクターのコンテキストを指定し、オブジェクト/データをキャッシュすることもできますvar $content = $('.content', this);。これにより、コードが（データアクティブな文字列をチェックする代わりに）クリーン$(this).is('.active')になり、コーディングミスを整理することさえできます。

PS：最近のjQueryバージョンを使用している場合は、jQueryコーディングの知識も更新してください:)（例：ドキュメントを読む）

score 0 · Accepted Answer

必要なだけデータ属性を使用し続け、主にスタイリングのためにクラスを保持することをお勧めしますが、次のようにデータ属性にアクセスします。

$selector.data("name")

メソッドではなく

$selector.attr("data-name")

score 0 · Accepted Answer

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

タイプミス、する必要があります

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

これが、コンソールで未定義を取得している理由です。

onMouseOut の「データ編集」属性チェックは、設定されていない場合は未定義になる可能性がありました。デフォルトでfalseにしました。HTML要素の値をデフォルトにしたい場合や、ifステートメントで未定義をチェックしたい場合があります。

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

stop を get event と ui および sort(e,ui) に変更し、data-dragging 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);
        }
    });
});

jquery - jquery data-attribute はランダムに動作します

4 に答える 4

Related

Reference