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旁边的textarea。所以试试：

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

或使用以下内容，以便它之间没有任何数量的元素。

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

或者只是给你的textarea一个显示：阻止。

.someClass{
    display:block;
}

并隐藏textarea启动并删除它们之间的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");

<强> Demo

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事件，因为那里存在错别字

访问$（this）.next和slideDown

2 个答案: