javascript - 使用 "this"进行多项选择

Question

想要完全理解 Jquery 中的“this”是如何工作的。

一些生成 3 个选择下拉列表、错误消息和按钮的 HTML

<select class="kwas">
 <option value="-1">-- wybierz --</option>
 <option value="yes">tak</option> 
 <option value="no">nie</option>
</select>

<div style="display: none;" class="error">Can't be done</div>

<select class="kwas">
 <option value="-1">-- wybierz --</option>
 <option value="yes">tak</option> 
 <option value="no">nie</option>
</select>

<div style="display: none;" class="error">Can't be done</div>

<select class="kwas">
 <option value="-1">-- wybierz --</option>
 <option value="yes">tak</option> 
 <option value="no">nie</option>
</select>

<div style="display: none;" class="error">Can't be done</div>

<button class="button">Click Me!</button>

jQuery 函数:

$(".kwas").change(function(){
        if ( $(this).val() == 'no' ) {
                $('.error').hide();
                $('.button').show();
            }
            else {
                $('.error').show();
                $('.button').hide();
            }
        });

我想要实现的目标，不是重复我自己并编写一个将显示的函数值为“yes”的特定选择上的错误消息，但其他选择上没有错误消息。如果任何选择的值为“yes”，则隐藏该按钮。

我知道如何写得丑，但如何写得优雅？

http://jsfiddle.net/szymondzumak/Z8f6n/

Answer 1

尝试使用next()方法，它允许您在 DOM 中查找下一个元素，在您的情况下是带有 .error 类的元素，例如:

$(".kwas").change(function(){
     if ($(this).val() == 'no' ) {
          $(this).next('.error').hide();
          $('.button').show();
     } else {
          $(this).next('.error').show();
          $('.button').hide();
     }
});