3

更新しようとしていますdata-coords(11 行目) が、実行するとコードは実行されますが、data-coords更新されません。なんで？私には有効に見えますが、何か不足していますか?

$(document).on('click', '.next-prev-js', function (e) {
    var item = e.target;
    if($(item).is("img") && tagging){
        var offset = $(item).offset();
        var imgid = $(item).attr("data-image-id");
        var obi = $("#blackout-image").offset();
        x = (e.clientX - offset.left);
        y = (e.clientY - offset.top);
        addTag(e.clientX - obi.left - 55, e.clientY - 55);
        saveCoords(x, y, imgid);
        $(item).attr("data-coords", x+","+y);
        tagging = false;
        $(".tag-self").text("Tag yourself");
        $("#blackout-image img").css({cursor: "pointer"});
        $("#blackout-image .face").delay(3000).fadeOut("fast");
        return false;
    }
    var action = $(item).attr("data-action");
    nextPrevImage(action);
    return false;
});

HTML 部分は次のとおりです (これは php の echo ステートメント内にあります)。

<a class='thumb-photo' href=''>
    <img class='thumb-img' data-coords='$x,$y' data-id='$id' data-image-id='$imid' data-file='$f' src='/user-data/images/image.php?id=$id&file=$f&height=240&width=240' width='240' height='240' />
</a>

デモ

(このプロセス中にページを更新しないでください)

いずれかの画像をクリックすると、ビューアで開きます。

  • 左側の "Where is He" にカーソルを合わせると、データ座標がどこにあるかが四角形で表示されます (サムネイル画像から)
  • 次に「自分にタグを付ける」をクリックしてから、画像内の場所をクリックします。
  • 「esc」を押すか、透明な領域をクリックしてビューアを閉じます
  • 画像をもう一度クリックし、マウスを「Where is He」の上に置きます。座標は古い座標のままですが、新しい場所をクリックすると更新されているはずです。

http://wows.phpsnips.com/profile.php?id=1&tab=写真

4

2 に答える 2

3

データメソッドを使用する必要があります。

   $(item).data({coords: x+","+y});

また

   $(item).data("coords", x+","+y);

jsfiddle で動作します。

次の方法でデータ属性を確認できます。

   console.log($(item).data());
于 2013-02-17T18:33:09.957 に答える
1

属性が機能する方法はdata-、ページの読み込み時に値が jQuery データ オブジェクトにコピーされることです。その後、彼らはもう本当に接続されていません。したがって、属性を変更しても、オブジェクトは自動的に更新されません。他の方法でも同じです。

動作を実証するために簡単なテストを行いました。

jQuery:

var $d = $('div');
alert('Load: Attribute "a" gets copied to data object.\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test'));

$d.attr('data-test','b');
alert('Changed attribute to "b". Attribute changed, object still "a".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test'));

$d.data('test','c');
alert('Changed data object to "c". Object changed, attribute still "b".\rData Attribute: ' + $d.attr('data-test') + '\rData Object: ' + $d.data('test'));

デモ:
http://jsfiddle.net/F5qkq/

したがって、あなたの場合、データ属性のみを変更しますattrが、内部データオブジェクトはもう接続されていないため、同じままです。

data-attribute は、データ オブジェクトを startvalue で初期化するためにのみ実際に使用されます。しかしその後は、前述のようにdata、内部データ オブジェクトを変更するために jQuery の関数のみを使用する必要があります。

于 2013-02-17T18:57:21.387 に答える