jquery中的next()函数没有按预期工作

nzkunb0c  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(164)

我知道这是一个重复的问题,但这个问题对我没有帮助,因为我的问题有点不同。
下面是我的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>没有显示。
我现在该怎么办?

dxxyhpgq

dxxyhpgq1#

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

$('.selector').val()

如果没有事件处理程序,$(this)不能引用select元素,它引用window元素。
使用以下代码,

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

Demo

xesrikrc

xesrikrc2#

在您的示例中,this不引用类为selector的元素。它将仅引用window。修改代码如下,

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

km0tfn4u3#

老兄,没必要这么复杂

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();
   }
});
cx6n0qe3

cx6n0qe34#

如果没有事件上下文,$(this)就没有意义。此外,这种说法是错误的:

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

应写成:

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

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

在这种情况下,您可以这样写:

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

相关问题