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

Posted 2023-02-25

【中文标题】jquery 中的 next() 函数未按预期工作

【英文标题】：next() function in jquery is not working as expected

【发布时间】：2014-07-09 08:41:14

【问题描述】：

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

这是我的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> 没有出现。

我现在该怎么办？

【问题讨论】：

先创建一个小提琴

请多花点时间在jQuery Learning Center。抱歉，您似乎缺乏基础知识。

一个最重要的单行：$('.selector:has(option[value="volvo"]:selected)').next().show().

谢谢，现在试试。 @杰克

【参考方案1】：

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

$('.selector').val()

没有事件处理程序$(this) 不能引用select 元素，它引用window 元素。

使用以下代码，

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

Demo

【参考方案2】：

在您的示例中，this 不是指类 selector 的元素。它将仅引用window。像这样更改代码，

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

【讨论】：

不应运行选择器两次。将结果保存在变量中。另外，this 会在哪个浏览器中引用document？ （进行这些更改后，您的答案将与 Shaunak 的相同，因此您也可以将其删除）

打开浏览器的控制台，输入 this 并按 Enter :)。当然，如果代码在$(document).ready() 处理程序中运行，this 将引用document。视情况而定。

@kapa 知道了。谢谢:)

【参考方案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();
   
);

【讨论】：

我只是在使用他创建的元素。建议使用 ID。

是的，您只是对一个很可能更广泛的问题做出了非常具体的回答，因此 OP 很可能会返回由您的回答引发的另一个问题。请注意，由于您的答案在这种特定情况下有效，所以我不是反对它的人

【参考方案4】：

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

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

应该写成：

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

或

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

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

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