获取 html 下一个兄弟姐妹

Question

此 Meteor 客户端代码尝试获取 2 个值。
(1)<span class="radio-label">{{this.label}}</span>行this.label中的值。
(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);  
  }
});

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>