2

我在页面上有一个元素列表，我只想在新创建的元素上运行一个函数。问题是当我再次调用该函数时，它将该函数应用于具有相同类的所有元素。

<ul>
    <li class="element">Created on load 1</li>
    <li class="element">Created on load 2</li>
    <li class="element">Created dynamicly 1</li>
    <li class="element">Created dynamicly 2</li>
</ul>

在上面的示例代码中，我有一个类的元素列表element。我想调用一个只在动态创建的元素上运行的函数，即。加载页面时不是 DOM 中的那些

4

3 回答 3

1

您可以使用MutationObserverAPI 来监听元素子列表的更改。以下示例演示了一种可能的用法。大部分都是从MDN网站上无耻地复制过来的。

const targetNode = document.querySelector('ul');

const config = {
  attributes: false,
  childList: true,
  subtree: false
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

///
document.querySelector('button').addEventListener('click', () => {
  const li = document.createElement('li');
  li.textContent = 'dynamically added';
  li.classList.add('element');
  
  document.querySelector('ul').appendChild(li);
});
<ul>
  <li class="element">Created on load 1</li>
  <li class="element">Created on load 2</li>
</ul>

<button>Add more elements</button>

于 2019-10-03T09:07:47.300 回答
1

我的评论示例。您可以在正确的时间添加/删除另一个类，因此 CSS 只会为最后批量添加的项目着色。

const add_items = texts => {
  const previous_items = document.querySelectorAll( 'li.dynamic' );
  Array
    .from( previous_items )
    .forEach( item => item.classList.remove( 'dynamic' ));
  const new_items = texts.map( text => {
    const new_item = document.createElement( 'li' );
    new_item.textContent = text;
    new_item.classList.add( 'element', 'dynamic' );
    return new_item;
  });
  const list = document.querySelector( 'ul' );
  new_items.forEach( item => list.appendChild( item ));
};

document.querySelector( '#add_1' ).addEventListener( 'click', event => {
  add_items([ 'Created dynamically 3' ]);
});

document.querySelector( '#add_2' ).addEventListener( 'click', event => {
  add_items([
    'Created dynamically 4',
    'Created dynamically 5'
  ]);
});
.element {
  background-color: lightblue;
}
.dynamic {
  background-color: lightgreen;
}
<ul>
  <li class="element">Created on load 1</li>
  <li class="element">Created on load 2</li>
  <li class="element dynamic">Created dynamicly 1</li>
  <li class="element dynamic">Created dynamicly 2</li>
</ul>
<button id="add_1">Add 1</button>
<button id="add_2">Add 2</button>

于 2019-10-03T09:12:12.720 回答
1

感谢您的帮助，我发现该问题最有用的解决方案是： - 每次运行该函数时，我都会删除原始类名并添加一个新类名，现在当函数运行时使用原始名称，因此最终只有具有原始名称的元素会更改。

这是改变元素的魔法：

$('.element').removeClass('element').addClass('element-processed');
于 2019-10-03T14:48:00.097 回答