Jquery 条件语句？

Question

我正在尝试为 onepageweb 导航编写脚本。主要目标是在单击时更改选择器，第一部分工作正常，但第一个 li 是站点徽标，因此当我单击徽标时，我想添加 .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

两个问题：

您正在使用 = 进行比较 (if (this = $(".main-nav li:first-of-type")))。 = 总是赋值。由于您无法分配给 this，这是一个错误，不会发生任何其他事情。
如果你在那里使用 == 或 ===，那将不起作用，因为 this 将引用 DOM 元素，但是 $() 的 return 值始终是 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>

Jquery 条件语句？

Jquery conditional statement?

javascript

jquery

jquery-selectors