javascript - 如何让 jQuery 只选择第一个 closest() 元素？

Question

HTML

<h5>Do you have a reference number?</h5>
  <span class="form-mini-style has_sub_span_field"> <input type="radio" value="1" name="ref">Yes </span>
  <span class="form-mini-style has_sub_span_field"> <input type="radio" value="0" name="ref">no </span> </span>
  <span class="sub_span" style="display:none;">
    <h5>Reference Number:</h5> --- FIELD HERE --- </span>

<h5>Other questions . . . 1 </h5>
  <span class="form-mini-style"> <input type="radio" value="1" name="oq1">Yes </span>
  <span class="form-mini-style"> <input type="radio" value="0" name="oq1">no </span> </span>
  <!-- no sub_span -->

<h5>Other questions . . . 2 </h5>
  <span class="form-mini-style"> <input type="radio" value="1" name="oq2">Yes </span>
  <span class="form-mini-style"> <input type="radio" value="0" name="oq2">no </span> </span>    
  <!-- no sub_span -->

<h5>Do you like TacoBell?</h5>
  <span class="form-mini-style has_sub_span_field"> <input type="radio" value="1" name="tacobell">Yes </span>
  <span class="form-mini-style has_sub_span_field"> <input type="radio" value="0" name="tacobell">no </span> </span>
  <span class="sub_span" style="display:none;">
    <h5>Taco Bell Favorite Foods:</h5> --- FIELD HERE --- </span>

jQuery

$(function () {
  $("input", ".has_sub_span_field").on('click', function () {
  var next_span_class, next_span_value;
    next_span_class = $(this).parent().next().attr('class');
    next_span_value = $(this).val();

    if (next_span_class != 'sub_span') {
      next_span_class = $(this).parent().next().next().attr('class');
    }

    if (next_span_class == 'sub_span' && next_span_value == 1) {
      $('.' + next_span_class).is(":visible") ? true : $('.' + next_span_class).show();
    } else {
      $('.' + next_span_class).hide();
    }
  });
});

我想做的只是显示 sub_span 是最接近所选的 radio 输入。 这是一个 fiddle :http://jsfiddle.net/ea6AK/

上述代码的问题在于，无论是否靠近单击的单选按钮，单击单选按钮时都会显示所有 sub_span。

Answer 1

代码按类选择元素:

$('.' + next_span_class)

这正是您将得到的。当您可以简单地遍历 DOM 并直接“走”到您想要显示/隐藏的元素时，为什么要经过所有这些间接的方式？

$(function () {
    $("input", ".has_sub_span_field").on('click', function () {
        var next_span = $(this).parent().nextAll(".sub_span:first");
        var next_span_value = $(this).val();

        if (next_span_value == 1) {
            next_span.show();
        } else {
            next_span.hide();
        }
    });
});

http://jsfiddle.net/mattball/PgrAy/

---

注意与其让 == 为您执行类型强制转换，不如这样写:

if (parseInt(next_span_value, 10) === 1) {
    ...
}

---

Why nextAll() and not nextUntil()?

nextUntil() 不是一个好主意，因为它选择了多个元素，并且在您真正想要的元素之前就停止了。仔细阅读文档:

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

---

Why do you have to explicitly say parent() shouldn't it be smart enough to just walk the dom until a match is found?

这里没有魔法。 jQuery 不知道您要搜索 DOM 中与起始元素相关的哪个位置。所以你必须明确。