Question

对于这个HTML：

 <div class="container">

<div class="stackRightRow" id="stack1">   
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>   
<div class="pod">
<p class="podLabel"></p>
</div>
</div> 
<div class="stackRightRow" id="stack2">   
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>   
<div class="pod">
<p class="podLabel"></p>
</div>
</div> 

<div class="stackRightRow" id="stack3">   
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div> 
<div class="podMiddle">
</div>
<div class="podMiddle">
</div>
<div class="podMiddle">
</div> 
<div class="pod">
<p class="podLabel"></p>
</div>
</div>

</div>

当我点击堆栈div时，以下JQuery会更改podMiddle和pod的CSS参数，只要它们包含在该堆栈中，即我点击的那个：

$(document).ready(function() {
    $('.stackLeftRow, .stackRightRow').on('click', enlarge);
      function enlarge() 
      {
           $(event.target).closest('.stackLeftRow').find('.podMiddle').css({'margin-left' : '-3.3em'}); 
           $(event.target).closest('.stackLeftRow').find('.pod').css({'top' : '-0.287em' , 'margin-left' : '-3.8em'}); 
      }
    });

到目前为止一切顺利。如果我点击stack3，则只会更改pod内的podMiddle和stack3元素。

现在我要做的就是编写JQuery，如果我点击另一个堆栈，它将再次更改CSS。所以我想基本上说“如果给定的堆栈id 不是事件目标，那么将其CSS更改为XYZ”。

我尝试了if语句和event.target的各种组合，但到目前为止还没有成功。

Answer 1

我会考虑使用一个类来简化它并保持CSS所在的位置（使用其他CSS，而不是javascript代码）。

因此，假设您在样式表中添加了以下CSS规则。

.stackRightRow.stackSelected .pod {
  top: -0.287em;
  margin-left: -3.8em;
}

.stackLeftRow.stackSelected .podMiddle {
  margin-left: -3.3em;
}

请注意，CSS规则将更改应用于pod和podMiddle，但是基于在堆栈*级别添加的类来执行此操作。这是触发行为的地方，因此这应该是应用类的地方。

然后你可以大大简化你的jQuery代码：

// define your "clickable" stacks.
$stacks = $('.stackLeftRow, .stackRightRow');
// add click behavior
$stacks.on('click', function() {
    $stacks.removeClass('stackSelected');
    $(this).addClass('stackSelected');
});

注意我删除了不必要的放大功能。我还在应用它的级别（在堆栈级别）应用了该类。这个简单的函数只需从$stacks中定义的所有堆栈中删除'stackSelected'类，然后将类添加到具有click事件的类中。

实际上，我甚至可能会将CSS规则分解为甚至没有像stackRightRow和stackLeftRow这样的类名，但可能是这样的：

.selectableStack {
   /* all rules that are common to curently defined stackRightRow and stackLeftRow */
}
.selectableStack.left {
   /* all "left stack" rules */
}
.selectableStack.right {
   /* all "right stack" rules */
}
.selectableStack .pod {
   /* all rules common to pod and podMiddle */
}
.selectableStack .pod.middle {
   /* specific rules for podMiddle */
}
.selectableStack.selected .pod {
   top: -0.287em;
   margin-left: -3.8em;
}
.selectableStack.selected .pod.middle {
   margin-left: -3.3em;
}

将您的js进一步简化为：

// define your "clickable" stacks.
$stacks = $('.selectableStack');
// add click behavior
$stacks.on('click', function() {
    $stacks.removeClass('selected');
    $(this).addClass('selected');
});

Answer 2

不是通过jQuery添加css，而是创建一个名为.highlighted或类似的类。

然后在点击事件中，您可以检查是否存在具有该类的div，如果存在，则删除该类的removeClass（＆＃39;突出显示＆＃39;），并将div（＆＃39;突出显示的＆＃39;）添加到div点击了。

然后通过类.highlighted的CSS来处理你的样式

JQuery：如果元素不是event.target，则更改css

2 个答案: