2

我正在尝试创建两个子 div，单击它们中的任何一个都会为“toggler”类子 div 提供“突出显示”类。我正在创建一个包含“toggler”类的“toggler”选择器变量。然而，给定以下代码，两个子 div 都被赋予了“highlight”类，而不是选择器变量设置为持有的“toggler”类。

HTML：

<div class="parent_div">
  <div class="first_child">
    First Child Text
  </div>
  <div class="toggler">
    Toggler
  </div>
</div>

CSS：

.parent_div > div {
    display: inline-block;
    float: left;
    clear: both;
}

.parent_div > div:hover {
    cursor: pointer;
}

.highlight {
    background-color: yellow;
}

jQuery：

$(document).ready(function() {
  var toggler = $('.toggler');
  var eitherChild = $('.first_child, .toggler');

  eitherChild.click(function() {
      var thisParent = $(this).parent();
      thisParent.children(toggler).toggleClass('highlight');
  });
});

显示结果的小提琴：http: //jsfiddle.net/bronzegate/5yTBP/

将 jQuery 更改为以下内容会产生所需的结果：

$(document).ready(function() {
  var eitherChild = $('.first_child, .toggler');

  eitherChild.click(function() {
      var thisParent = $(this).parent();
      thisParent.children('.toggler').toggleClass('highlight');
  });
});

显示结果的小提琴：http: //jsfiddle.net/bronzegate/ZS8P5/

为什么前一种情况下的 Children 方法会同时选择两个孩子，而不是只选择“toggler”选择器变量中定义的孩子？

4

3 回答 3

1

children() 函数接受一个选择器：

http://api.jquery.com/children/

.children（[选择器]）

返回： jQuery

描述：获取匹配元素集中每个元素的子元素，可选地由选择器过滤。

选择器：一个字符串，包含一个选择器表达式来匹配元素。

在第一种情况下（错误的情况），您传递了一个失败的对象：

var toggler = $('.toggler');

在第二种情况下，您只传递了选择器 ('.toggler')，这就是它按预期工作的原因。

于 2013-05-29T15:48:05.003 回答
0

因为该.children()方法只接受一个用于过滤的字符串选择器......而不是一个元素。

引用

.children( [selector ] )
selector
类型：Selector
一个字符串，包含一个选择器表达式来匹配元素。

您尝试实现的目标可以通过.filter()（它接受元素或 jQuery 对象作为参数）来完成，但在这种情况下仍然没有任何意义..

thisParent.children().filter(toggler).toggleClass('highlight');
于 2013-05-29T15:47:24.850 回答
0

因为.children()只接受selector而不是 jquery 对象

于 2013-05-29T15:48:02.340 回答