获取html nextSibling

Question

此Meteor客户端代码尝试获取2个值。

(1) <span class="radio-label">{{this.label}}</span>行的this.label中的值。

(2) <input type="radio" name="rbtn" value={{this.result}}>行中{{this.result}}中的值

这需要在我单击input或span元素时发生。如何做到这一点？thx

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);  
  }
});

Answer 2

下面的方法对我很有效。但我希望这是一个更好的解决方案。向input和span元素添加不同的类，并使用事件处理程序。

Template.results.events({
  'click .radio-label': (event) => {
    event.preventDefault();
    event.stopPropagation();
    let option = event.target.innerHTML;
    let btn = event.target.parentElement.children[0];
    let res = btn.getAttribute('value');
    btn.checked = true;
    console.log(option + ' ' + res);
  },
  'click .radio-btn': (event) => {
    let res = event.target.parentElement.children[0].getAttribute('value');
    let option = event.target.parentElement.children[1].innerHTML;
    console.log(option + ' ' + res);
  }
});

<template name="results">
  <p id="result" data-id={{_id}}>{{{display.name}}} <br>
    {{display.address}} <br>
    <span id="category">{{display.result}}</span></p>

  <div class="twin-group js-radioGroup">
    <ul class="upShift">
      {{#each display.deciders}}
        <li>
          <label class="twin-item">
            <input class="radio-btn" type="radio" name="rbtn" value={{this.result}}>
            <span class="radio-label">{{this.label}}</span>
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
</template>