Question

我有一个输入列表，这些输入构成了我用来构建json文件的UI。在我的json文件中，我有2个作用域，并且每个输入都会向每个作用域添加不同的字符串。对于该示例，我要准备附加到的2个对象是three-obj和three-array。如果input.parentNode包含这些类中的任何一个，我想将其推入正确的对象。

为此，我首先使用NodeList将所有输入都输入到querySelectorAll中。然后，我使用onChange启动我的功能。

到目前为止，这是我所拥有的，但是无论我使用哪种输入，它似乎都会在控制台中返回false。

function determineScope(element, scopeClass1, scopeClass2) {
  console.log('running');

  if (element.className.split(' ').indexOf(scopeClass1 || scopeClass2) >= 0) {

    if (scopeClass1) {
      console.log('put me in three obj');
    } else {
      console.log('put me in three arr');
    }
  } else {
    console.log('false');
  }
}

除了立即parentNode之外，还有其他方法可以检查吗？

JSFiddle Here

Answer 1

我将使用querySelector两次自上而下地解析DOM树：一次使用.three-obj，再一次使用.three-array。

选择器各部分之间的空格表示“ somwhere ”，因此.three-obj [your-input-selector]查找与[your-input-selector]匹配的所有元素，这些元素位于与{{1}匹配的元素内}。

.three-obj

更新：在链接的小提琴中，您似乎误解了我的代码。该代码片段对它的解释是否更好？

const inputSelector = '...';

document.querySelector('.three-obj ' + inputSelector).forEach(elem => {
  console.log('Adding to three obj', elem);
});

document.querySelector('.three-array ' + inputSelector).forEach(elem => {
  console.log('Adding to three array', elem);
});

function handleChange(type) {
  console.log('Change!', type, this);
}

const inputSelector = '.inputColor';

document.querySelectorAll('.three-obj ' + inputSelector).forEach(input => {
  input.addEventListener('change', e => handleChange.bind(e.target)('obj'));
});

document.querySelectorAll('.three-arr ' + inputSelector).forEach(input => {
  input.addEventListener('change', e => handleChange.bind(e.target)('arr'));
});

以下是使用数据属性的通用方法：

<div class="three-obj">
  <div class="two">
    <div class="one">
      <label for="thing">thing1</label>
      <input class="inputColor" type="text" name="thing" value="">
    </div>
  </div>
</div>

<div class="three-arr">
  <div class="two">
    <div class="one">
      <label for="thing2">thing2</label>
      <input class="inputColor" type="text" name="thing2" value="">
    </div>
  </div>
</div>

function handleChange() {
  const type = this.dataset.type;
  console.log('Change!', type, this);
}

const inputSelector = '.inputColor';

document.querySelectorAll('.three-obj ' + inputSelector).forEach(input => {
  input.dataset.type = 'obj';
});

document.querySelectorAll('.three-arr ' + inputSelector).forEach(input => {
  input.dataset.type = 'arr';
});

// getElementsByClassName is more efficient than querySelector
// However, it returns an HTMLCollection, not a NodeList
// This bizarre call allows you to use Array’s forEach function on it
[].forEach.call(document.getElementsByClassName('inputColor'), input => {
  input.addEventListener('change', e => handleChange.bind(e.target)());
});

如何确定elements.parentNode或Ancestor是否具有类？

1 个答案: