突变观察者能否听取“数据 - ”的变化。属性？ [英] Can mutation observer listen for changes in "data-" attributes?

问题描述

所以问题是我有一个html元素，其中有一个data-属性的对象（通过jQuery ofc设置），我想听取该属性的变化。

So the problem is that I have an html element which has an object in a "data-" attribute (set via jQuery ofc) and I want to listen to changes in that attribute.

我已经尝试了很多东西，比如在 MutationObserverInit对象，但没有一个帮助。

I have already tried a lot of things, like setting almost all possible combination values in the MutationObserverInit object, but none of this help.

有谁知道如果有可能吗？

Does anybody know if it is possible?

$('#some-id').click( function() {
  //$('#some-id').attr('title', 'some-title'); //this works
  $('#some-id').data('foo', 'bar1'); //this don't
});

var functionCallBack = function(mutations) {
  alert('something changed')
}

// select the target node
var target = document.getElementById("some-id");

// create an observer instance
var observer = new MutationObserver(functionCallBack);

// configuration of the observer:
var config = { subtree: true, childList: true , attributes: true};

// pass in the target node, as well as the observer options
observer.observe(target, config);

$('#some-id').data('foo', 'bar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-id">HEY</div>

推荐答案

新答案（基于 Oriol的答案）：

New Answer (Based on Oriol's Answer):

我认为Oriol提供了更好的方法，但可以进一步优化。

I think Oriol provided a better approach but it could be optimized further.

var object = {
  'key': 'value'
};

$('.addObj').click(function() {
  $('#some-id').observeData('foo', object, function() {
    console.log("Object Added");
  });
});

$('.removeObj').click(function() {
  $('#some-id').observeData('foo', null, function() {
    console.log("Object removed");
  });
});


jQuery.fn.observeData = function(name, object, callback) {
  // Get elemenet
  var element = $(this[0]);

  // Add data
  element.data(name, object);

  // Call the callback function
  callback();

  // Return this for a chainable function
  return this;
};

span {
  padding: 10px;
  float: left;
  margin: 5px;
  cursor: pointer;
  background-color: green;
  border: 1px solid black;
  border-radius: 5px;
  transition: all 0.5s;
  color: white;
  font-size: 13px;
}
span:hover {
  opacity: 0.8;
}
#some-id {
  text-align: center;
  width: 100%;
  margin: 10px 0;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-id">HEY</div>

<span class='addObj'>Add Object</span>
<span class='removeObj'>Remove Object</span>

JSFiddle： https：/ /jsfiddle.net/t012rb9j/1/

JSFiddle: https://jsfiddle.net/t012rb9j/1/

旧答案：

正如您在代码中所述：

$('#some-id').click(function() {

 // $('#some-id').attr('title', 'some-title'); //this works
 $('#some-id').data('foo', 'bar1'); //this don't
});

.attr（）在.data（）不起作用时有效。原因是.attr（）将属性值添加到HTML标记，而数据将此数据存储到内存中。

.attr() works while .data() is not working. The reason is that .attr() adds an an attribute value to your HTML tag while data stores this data in memory.

来自jQuery文档：

From jQuery documentation:

。data（） ：存储与指定元素关联的任意数据和/或返回已设置的值。

.data(): Store arbitrary data associated with the specified element and/or return the value that was set.

.attr（） ：获取价值匹配元素集中第一个元素的属性，或者为每个
匹配元素设置一个或多个属性。

.attr(): Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

检测数据更改的一种方法（如果要存储对象）是将两个函数组合在一起。

One way to detect data changes (if you want to store an object) is to combine both functions.

var object = {
  'key': 'value'
};

$('.addObj').click(function() {
  $('#some-id').data('foo', object).attr("data-attached", "true");
});

$('.removeObj').click(function() {
  $('#some-id').data('foo', null).attr("data-attached", "false");
});


var functionCallBack = function(mutations) {
  mutations.forEach(function(mutation) {
    if (jQuery(mutation.target).attr("data-attached") == "true") {
      // Your code here
      console.log("Object Added");
    } else {
      console.log("Object removed");
    }
  });
}

// select the target node
var target = document.getElementById("some-id");

// create an observer instance
var observer = new MutationObserver(functionCallBack);

// configuration of the observer:
var config = {
  subtree: true,
  childList: true,
  attributes: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config);

.addObj, .removeObj {
  padding: 10px;
  float: left;
  margin: 5px;
  cursor: pointer;
  background-color: green;
  border: 1px solid black;
  border-radius: 5px;
  transition: all 0.5s;
  color: white;
  font-size: 13px;
}

.addObj:hover, .removeObj:hover {
  opacity: 0.8;
}

#some-id {
  text-align: center;
  width: 100%;
  margin: 10px 0;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-id">HEY</div>

<span class='addObj'>Add Object</span>
<span class='removeObj'>Remove Object</span>

JSFiddle： https：// jsfiddle .net / 9xkb6jv4 /

JSFiddle: https://jsfiddle.net/9xkb6jv4/

这篇关于突变观察者能否听取“数据 - ”的变化。属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！