javascript - Jquery条件语句？

Question

我正在尝试为 onepageweb 导航编写脚本。主要目标是更改点击选择器，第一部分工作正常，但第一个 li 是站点 Logo ，因此当我单击 Logo 时，我想添加 .select 第二个 li。 :

$(document).ready(function (){

    $(".main-nav li").click(function () {
        if (this = $(".main-nav li:first-of-type")) {
            $(this).next().addClass("selected")
                    .siblings().removeClass("selected");
        } else {
            $(this).addClass("selected")
                    .siblings().removeClass("selected");
        }
    });
});

这个条件不起作用

Answer 1

两个问题:

1. 您使用 = 进行比较 (if (this = $(".main-nav li:first-of-type"))) 。 = 始终赋值。由于您无法分配给 this，因此这是一个错误，不会发生任何其他情况。

2. 如果您在那里使用 == 或 === ，它将不起作用，因为 this 将引用DOM 元素，但 $() 的返回值始终是 jQuery 对象。

你可能想要

if ($(this).is(".main-nav li:first-of-type"))

...使用is测试单击的元素是否与给定的选择器匹配。

旁注::first-of-type 应该可以工作，但因为 ul 元素只能仅包含 li 元素，:first 也可以工作。

实例:

$(document).ready(function() {
    $(".main-nav li").click(function() {
        if ($(this).is(".main-nav li:first-of-type")) {
            $(this).next().addClass("selected")
                .siblings().removeClass("selected");
        } else {
            $(this).addClass("selected")
                .siblings().removeClass("selected");
        }
    });
});

.selected {
  color: red;
}

<ul class="main-nav">
  <li>The logo item</li>
  <li>The second item</li>
  <li>The third item</li>
<ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>