Question

我无法在父组（＆＃39; .other-row＆＃39;）中获取div（＆＃39; .option-other＆＃39;）以显示/隐藏相应的内容选择元素的选项（＆＃39; .select-toggle＆＃39;）。现在，如果＆＃34;其他＆＃34;从问题集1或2中选择它将显示＆＃39; .option-other＆＃39; div的。我尝试使用.parent（）和.closest（）as described in this solution，但似乎无法找到在此用例中使用它的正确方法。

＆＃13;

$(".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();

＆＃13;

<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>

＆＃13;

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

这为整个页面设置了一个可见性值：如果在任何地方选择了至少一个“其他”选项，则显示 all 文本输入。 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();

这样可行，但它可能更干净。显示或隐藏基于布尔值的元素是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>

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

Answer 2

这是一个有点笨重的解决方案，但我做得相对较快。这是一种解决方法，因为必须知道选择了哪一个具有相同类别的选择器。

以下是使用您的代码的工作示例。

$(".select-toggle").change(function () {
  var oth = false;
  $(".select-toggle option:selected").each(function () {
    if ($(this).val() == "otherFood") {
      oth = true; 
      $('.option-other-food').show();
    } else {
      $('.option-other-food').hide();
    };
    if ($(this).val() == "otherDrink") {
      oth = true; 
      $('.option-other-drink').show();
    } else {
      $('.option-other-drink').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="otherFood">Other</option>
      </select>
    </div>
  </div>
  <div class="col">
    <div class="form-group option-other-food">
      <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="otherDrink">Other</option>
      </select>
    </div>
  </div>
  <div class="col">
    <div class="form-group option-other-drink">
      <label>Other</label>
      <input type="text" placeholder="what other stuff do you like"/>
    </div>
  </div>
</div>

干杯！

显示/隐藏同一父div中的元素

2 个答案: