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>

演示

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

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

  • 在左侧将鼠标悬停在“他在哪里”上，一个正方形将显示数据坐标的位置（来自缩略图）
  • 接下来单击“标记自己”，然后单击图像中的位置。
  • 按“esc”或单击透明区域关闭查看器
  • 再次单击图像，将鼠标悬停在“他在哪里”上，坐标仍然是旧坐标，但在单击新位置后它们应该已更新

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

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/

因此，在您的情况下，您只需更改 data 属性，attr但内部数据对象保持不变，因为它们不再连接。

data-attribute 仅真正用于使用起始值初始化数据对象。但在那之后，如前所述，您应该只使用 jQuery 的data函数来更改内部数据对象。

于 2013-02-17T18:57:21.387 回答