javascript - 在同一父 div 中显示/隐藏元素

Question

当选择元素的相应选项('.select-toggle')时，我无法让父组('.other-row')中的 div('.option-other')显示/隐藏) 被选中。现在，如果从问题集 1 或 2 中选择“其他”，它将显示两个“.option-other”div。我尝试使用 .parent() 和 .closest() as described in this solution ，但似乎无法找出将其用于此用例的正确方法。

$(".select-toggle").change(function() {
  var oth = false;
  $(".select-toggle option:selected").each(function() {
    if ($(this).val() == "other") oth = true;
  });
  if (oth) $('.option-other').show();
  else $('.option-other').hide();

  // tried this method as well but still doesnt work
  // if (oth) $(this).closest('.other-row').children('.option-other').show();
  // else $(this).closest('.other-row').children('.option-other').hide();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
  <div class="col">
    <div class="form-group">
      <label>What stuff do you eat?</label>
      <select class="select-toggle" multiple>
            <option>Pizza</option>
            <option>Cake</option>
            <option value="other">Other</option>
          </select>
    </div>
  </div>
  <div class="col">
    <div class="form-group option-other">
      <label>Other</label>
      <input type="text" placeholder="what other stuff do you like" />
    </div>
  </div>
</div>

<!-- Question set 2 -->
<div class="wrapper other-row">
  <div class="col">
    <div class="form-group">
      <label>What stuff do you drink?</label>
      <select class="select-toggle" multiple>
            <option>Water</option>
            <option>Soda</option>
            <option value="other">Other</option>
          </select>
    </div>
  </div>
  <div class="col">
    <div class="form-group option-other">
      <label>Other</label>
      <input type="text" placeholder="what other stuff do you like" />
    </div>
  </div>
</div>

Answer 1

// you wrote:
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();

你很接近，但是 $.children 只选择每个 .other-row 的直接子代.自 .option-other在里面.col里面.other-row , $.children看不到它。使用 $.find 相反。

// your original code:
var oth = false;
$(".select-toggle option:selected").each(function() {
  if ($(this).val() == "other") oth = true;
});

这会为整个页面设置一个可见性值:如果至少选择了一个“其他”选项，则在任何地方显示所有 文本输入。 change为 <select> 触发事件实际上已经改变了，所以把你的精力集中在那里:

var oth = false;
$(this).children("option:selected").each(function() {
  if ($(this).val() == "other") oth = true;
});
if (oth) $(this).closest('.other-row').find('.option-other').show();
else $(this).closest('.other-row').find('.option-other').hide();

这行得通，但它可能更干净。基于 bool 值显示或隐藏元素是一个非常普遍的需求，jQuery 为其提供了一个函数: $.toggle .您可以替换 if/else行与

$(this).closest('.other-row').find('.option-other').toggle(oth);

你的 $.each循环做一件事:设置oth如果至少有一个被选中 <option>值为 "other" .您可以使用 attribute selector 获得与单行代码相同的逻辑。 :

var oth = ($(this).find('option:checked[value="other"]').length !== 0);

(我将 :selected 更改为 :checked 因为您已经在过滤 option 元素和 :selected has a performance penalty 。)

最终版本:

$(".select-toggle").change(function() {
  var oth = ($(this).find('option:checked[value="other"]').length !== 0);
  $(this).closest('.other-row').find('.option-other').toggle(oth);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
  <div class="col">
    <div class="form-group">
      <label>What stuff do you eat?</label>
      <select class="select-toggle" multiple>
            <option>Pizza</option>
            <option>Cake</option>
            <option value="other">Other</option>
          </select>
    </div>
  </div>
  <div class="col">
    <div class="form-group option-other">
      <label>Other</label>
      <input type="text" placeholder="what other stuff do you like" />
    </div>
  </div>
</div>

<!-- Question set 2 -->
<div class="wrapper other-row">
  <div class="col">
    <div class="form-group">
      <label>What stuff do you drink?</label>
      <select class="select-toggle" multiple>
            <option>Water</option>
            <option>Soda</option>
            <option value="other">Other</option>
          </select>
    </div>
  </div>
  <div class="col">
    <div class="form-group option-other">
      <label>Other</label>
      <input type="text" placeholder="what other stuff do you like" />
    </div>
  </div>
</div>

普通 JS 版本:

document.querySelectorAll('.select-toggle').forEach(el => {
  el.addEventListener('change', evt => {
    const oth = evt.target.querySelector('option:checked[value="other"]');
    evt.target
      .closest('.other-row')
      .querySelector('.option-other')
      .style.display = (oth ? '' : 'none');
  });

  // trigger change event programmatically
  const event = document.createEvent('HTMLEvents');
  event.initEvent('change', true, false);
  el.dispatchEvent(event);
});