JQuery的：改變CSS如果一個元素不是event.target

對於這個HTML：JQuery的：改變CSS如果一個元素不是event.target

<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，它只會更改stack3中的pod和podMiddle元素。

現在我想要做的是編寫JQuery，如果我點擊另一個堆棧，它將再次更改CSS。所以我想說基本上「如果一個給定的堆棧ID 不是事件目標，然後將其CSS更改爲XYZ」。

我試過if語句和event.target的各種組合，但目前還沒有成功。

來源

2015-10-06 user3762977

我會考慮使用一個類來簡化這種情況並保持你的CSS，它屬於（與其他CSS，不javascript代碼）。

因此，假設您已將以下CSS規則添加到您的樣式表中。這裏

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

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

注意的CSS規則更改應用到吊艙和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'); 
});

來源

2015-10-06 21:29:55

很好的答案，謝謝你的細節。那擴大的功能在那裏，因爲我在整體功能中有其他的東西，只是最小化它張貼在這裏，但是是的，這應該在任何情況下簡化事情。 – user3762977

而不是通過jQuery添加CSS來創建一個名爲.highlighted或類的類。

然後在點擊事件時，您可以檢查帶有該類的div是否存在，如果是，則removeClass（'突出顯示'），addClass（'突出顯示'）添加到被單擊的div。

然後通過類的CSS處理你的造型.highlighted

來源

2015-10-06 21:23:27 delashum

好主意。再加上上述所有細節的答案，這是非常有用的。今晚將解決這個問題，明天再回到這些答案。 – user3762977

JQuery的：改變CSS如果一個元素不是event.target

回答

相關問題