Question

我知道这是一个重复的问题，但这个问题对我没有帮助，因为我的问题有点不同。

这是我的html代码：

<select class="selector">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<div class="show" style="display:none;"></div>

这是我的jQuery代码：

if($('.selector').val()=="volvo")
   $(this).next('.show').show();

所以，我想要的是，如果<selector>具有值“volvo”，则其下一个div（具有“show”类）将显示，否则不显示。在这里，我没有使用任何change事件。我希望在页面加载后发生这种情况。

我也试过了：

if($('.selector').val()=="volvo")
   $(this).next().show();

但同样的结果，没有任何反应，<div>没有出现。

我现在该怎么办？

Answer 1

类选择器用作.class，类名前面有.。

$('.selector').val()

如果没有事件处理程序$(this)无法引用select元素，则它会引用window元素。

使用以下代码

var $selector = $('.selector');
if($selector.val()=="volvo")
   $selector.next('.show').show();

<强> Demo

Answer 2

在您的示例中，this未引用具有类selector的元素。它仅指window。更改代码，

var selector=$('.selector');
if(selector.val()=="volvo")
  selector.next().show();

Answer 3

多德。没有必要这么复杂

<强> HTML

<select class="selector">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<div class="show" style="display:none;"></div>

<强>的Javascript

$(document).ready(function(){
   if($('.selector').val()=="volvo")){
      $('.show').show();
   }
});

Answer 4

没有事件上下文$(this)没有意义。此外，这种说法是错误的：

if($('selector').val()=="volvo")

应该写：

if($('.selector').val()=="volvo")

或

if($('select.selector').val()=="volvo")

在这种情况下，您可以写：

if($('select.selector').val()=="volvo")
    $('.selector').next('.show').show();

jquery中的next（）函数未按预期工作

4 个答案: