javascript - 获取 html nextSibling

Question

此 Meteor 客户端代码尝试获取 2 个值。
(1)this.label中的值的<span class="radio-label">{{this.label}}</span>线。
(2){{this.result}}中的值在线<input type="radio" name="rbtn" value={{this.result}}>
当我单击 input 时，就会发生这种情况或上span元素。那怎么办呢？谢谢

Template.results.events({
  'click .twin-item': (event) => {
    event.preventDefault();
    event.stopPropagation();
    if (event.target.tagName === 'SPAN') {
      console.log(event.target.innerHTML);
    } else if (event.target.tagName === 'INPUT') {
      console.log(event.target.value);
    }
  }
});


<template name="results">
 <p id="result" data-id={{_id}}>{{{display.name}}} <br>
{{display.address}} <br>
<span id="category">{{display.result}}</span></p> <br>
  <div class="twin-group js-radioGroup" data-id={{_id}}>
    <ul class="upShift">
      {{#each display.deciders}}
        <li>
          <label class="twin-item">
            <input type="radio" name="rbtn" value={{this.result}}>
            <span class="radio-label">{{this.label}}</span>
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
</template>

Answer 1

每当您尝试从 DOM 中提取最初放入模板中的内容时，您可能都做错了。

您可以在 {{#each}} 循环中嵌套另一个模板，然后在该嵌套模板处理程序的情况下，this 的值将是当前数据上下文所以你可以这样做:

html:

<template name="results">
<p id="result" data-id={{_id}}>{{{display.name}}} <br>
{{display.address}} <br>
<span id="category">{{display.result}}</span></p> <br>
  <div class="twin-group js-radioGroup" data-id={{_id}}>
    <ul class="upShift">
      {{#each display.deciders}}
        {{> inner}}
      {{/each}}
    </ul>
  </div>
</template>

<template name="inner">
<li>
  <label class="twin-item">
    <input type="radio" name="rbtn" value={{result}}>
    <span class="radio-label">{{label}}</span>
  </label>
</li>
</template>

此外，将事件附加到每个控件比尝试找出事件来自哪个控件更简单:

js:

Template.inner.events({
  'click input'(event) => {
    event.stopPropagation();
    console.log(this.result);
  },
  'click span'(event) =>{
    event.stopPropagation();
    console.log(this.label);  
  }
});