Question

我正在尝试更新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>

演示

（在此过程中不要刷新页面）

如果单击其中一个图像，它将在查看器中打开。

左侧悬停在“他在哪里”，一个正方形将显示数据坐标的位置（来自缩略图）
然后单击“标记您自己”，然后单击图像中的某个位置。
按“esc”或点击透明区域
再次点击图片，然后将鼠标悬停在“他在哪里”，这些坐标仍然是旧的坐标，但是点击新位置后它们应该已经更新

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

Answer 1

您应该使用data方法。

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

或

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

适用于jsfiddle。

您可以通过以下方式查看数据属性：

   console.log($(item).data());

Answer 2

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的数据对象。但之后，如前所述，您应该只使用jQuery的data函数来更改内部数据对象。

data- *点击后不会更新

2 个答案: