Accessing $(this).next and slideDown

Question

选择选项首字母缩写时？是Textarea.someClass应该向下滑动并显示出来。我必须使用$(this)，因为页面上会有几个这样的选择选项和文本区域。

我已经尝试了下面代码的许多变体，包括使用sibling()，但它不起作用。

<select class="initials">
<option value="no">Initials? No</option>
<option value="yes">Initials? Yes</option>  
</select><br/>
<textarea class="someClass">Put instructions here </textarea>
<script type="text/javascript">
$('select.initials').change(function(){
     theVal = $(this).val();
    // alert(theVal); WORKING
    if(theVal == 'yes') {
        $(this).next('textarea.someClass').slideDown();
    })
</script>

Answer 1

您有一个br在中间，所以您的next()不会选择br旁边的文本区域。所以请尝试：

$(this).next().next('textarea.someClass').slideDown(); // 

或者使用下面的，这样就不会有任何数量的元素介于两者之间。

$(this).nextUntil('textarea.someClass').next().slideDown();

或者只是给你的文本区域一个显示：block。

.someClass{
    display:block;
}

并隐藏文本区域启动并删除其间的br。

此外，您在脚本中忘记了一个大括号。

$('select.initials').change(function(){
     theVal = $(this).val();
    // alert(theVal); WORKING
    if(theVal == 'yes') {
        $(this).next('textarea.someClass').slideDown();
    } //<--- Here
}); 

如果你试图切换到：，你也可以简单地编写脚本

$(this).next('textarea.someClass').slideToggle(this.value === "Yes");

演示

Answer 2

fiddle Demo

$('select.initials').change(function () {
    theVal = $(this).val();
    // alert(theVal); WORKING
    if (theVal == 'yes') {
        $(this).next().next('textarea.someClass').hide().slideDown();
    }
});

使用

$(this).next().next('textarea.someClass')

并且您没有正确关闭.change事件，您在中有拼写错误