Jquery replaceWith keep onclick

Question

如何使用JQuery replaceWith保留onclick=""值？我正在制作一个资产系统来预加载每个图像并将其放在Javascript image()对象上，并使用img urls的特殊数据属性

<img data-assets="images/test.png" onclick="alert('test')">

变成：（使用jquery replaceWith）

<img src="assets/images/test.png">

我想要的是什么：

<img src="assets/images/test.png" onclick="alert('test')">

我的代码：

$("[data-assets]").each(function() {
    $(this).replaceWith(Game.Preloading.Assets.Images[$(this).data('assets')]);
});

我该如何解决？感谢

Answer 1

在迭代每个[data-assets]元素时，您可以在替换元素之前设置相应的onclick属性：

$("[data-assets]").each(function() {
  var $newImg = $(Game.Preloading.Assets.Images[$(this).data('assets')]);
  $newImg.attr('onclick', $(this).attr('onclick'));

  $(this).replaceWith($newImg);
});

但是，最好只在现有元素上添加src属性而不是替换它：

$("[data-assets]").each(function() {
  this.src = $(Game.Preloading.Assets.Images[$(this).data('assets')]).attr('src');
});

理想情况下，应该使用unobtrusive JavaScript并避免内联JavaScript事件侦听器，但上述两个代码段都应该有效。

Answer 2

我认为您最好对您的属性进行简单查询，然后使用each方法更新每个匹配元素的SRC属性。

我在手机上，所以更详细的答案很难......

但是这里去了

$("[data-assets]").each(function(){ $(this).attr("src", Game.Preloading.Assets.Images[$(this).data('assets')]); });