如何选择所有类除了JQuery中点击的元素？ [英] how to select all class except the clicked element in JQuery?
问题描述
在其当前的统计信息中，它的工作方式当用户点击一个项目时，它将检查项目是否已经折叠或展开，并且会使该项目相反。这意味着如果用户点击一个项目，它将扩展，如果他/她点击另一个项目，它也将展开，但不会崩溃先前点击的项目。
你可以看到下面的代码。我知道我应该在哪里添加代码崩溃，以及如何崩溃和扩展。我的问题是：如何选择所有具有类别'.collapsiblock'的项目，除了用户点击的项目？
注意：类'.collapsiblockCollapsed'被折叠，如果该类从该项目中被移除，它将被扩展。
// $ Id： collapsiblock.js，v 1.6 2010/08/18 19:17:37 gagarine Exp $
Drupal.Collapsiblock = Drupal.Collapsiblock || {};
Drupal.behaviors.collapsiblock = function（context）{
var cookieData = Drupal.Collapsiblock.getCookieData（）;
var slidetype = Drupal.settings.collapsiblock.slide_type;
var defaultState = Drupal.settings.collapsiblock.default_state;
var slidespeed = parseInt（Drupal.settings.collapsiblock.slide_speed）;
$（'div.block：not（.collapsiblock-processed）'，context）.addClass（'collapsiblock-processed'）。each（function（）{
var id = this.id;
var titleElt = $（'：header：first'，this）.not（$（'。content：header'，this））;
if（titleElt.size（））{
titleElt = titleElt [0];
//状态值：1 =不可折叠，2 =可折叠和展开，3 =可折叠和折叠，4 =总是折叠
var stat = Drupal.settings.collapsiblock。 block [this.id]？Drupal.settings.collapsiblock.blocks [this.id]：defaultState;
if（stat == 1）{
return;
}
titleElt.target = $（this）.find（'div.content'）;
$（titleElt）
.addClass（'collapsiblock'）
.click（function（） {
var st = Drupal.Collapsiblock.getCookieData（）;
if（$（this）.is（'。collapsiblockCollapsed'））{
$（this）.removeClass（'collapsiblockCollapsed' ）;
if（slidetype == 1）{
$（this.target）.slideDown（slidespeed）;
}
else {
$（this.target）.animate（{height：'show'，opacity：'show'}，slidespeed）;
}
//如果块总是折叠，则不保存Cookie数据。
if（stat！= 4）{
st [id] = 1;
}
}
else {
$（this）.addClass（'collapsiblockCollapsed'）;
if（slidetype == 1）{
$（this.target）.slideUp（slidespeed）;
}
else {
$（this.target）.animate（{height：'hide'，opacity：'hide'}，slidespeed）;
}
//如果块总是折叠，则不保存Cookie数据。
if（stat！= 4）{
st [id] = 0;
}
}
//以JSON格式对对象进行字符串保存在Cookie中。
var cookieString ='{';
var cookieParts = [];
$ .each（st，function（id，setting）{
cookieParts [cookieParts.length] =''+ id +'：'+ setting;
}）;
cookieString + = cookieParts.join（'，'）+'}';
$ .cookie（'collapsiblock'，cookieString，{path：Drupal.settings.basePath}）;
}）;
//使活动块未撤销。如果块扩展，则不执行任何操作。
if（stat == 4 ||（cookieData [id] == 0 ||（stat == 3&& find（'a.active'）。size（））{
$（titleElt）.addClass（'collapsiblockCollapsed'）;
$（titleElt.target）.hide（）;
}
}
}）;
};
Drupal.Collapsiblock.getCookieData = function（）{
var cookieString = $ .cookie（'collapsiblock'）;
返回cookieString？ Drupal.parseJson（cookieString）：{};
};
更新：
通过添加以下代码已解决问题：
$（'。collapsiblock'）。每个（function（）{
$（this）.addClass（'collapsiblockCollapsed'）;
$（this.target）.animate（{height：'hide'，opacity：'hide'}，slidespeed ）;
}）;
正好位于以下行：
$（本）.removeClass（ 'collapsiblockCollapsed'）;
使用 不 选择器。
示例：
$（'。collapsiblock'）。click（function（）{
$（'。collapsiblock' ）.not（this）.each（function（）{
$（this）.slideUp（）;
}）;
$（this）.slideDown（）;
}）
I have a website developed on Drupal. I use a module called collapsiblock (it is basicly a JQuery plugin) to achieve accordion like effect. It is working fine with me (although it is in Beta). But I want to modify it so that when the user clicks on one item of the accordion the other items will collapsed.
In its current stats, it is working in a way that when the user click on one item, it will check if the item is already collapsed or expanded and it will make the item the opposite. That means if the user clicks on one item it will expand and if he/she clicks on another item it will also expand, but it will not collapse the previously clicked item.
You can see the code below. I know where should I add the code to collapse and how to collapse and expand. My question is: How do I select all the items that have the class '.collapsiblock' except the one that the user has clicked??
Note: the item that has the class '.collapsiblockCollapsed' get collapsed and if this class is removed from the item it get expanded.
// $Id: collapsiblock.js,v 1.6 2010/08/18 19:17:37 gagarine Exp $
Drupal.Collapsiblock = Drupal.Collapsiblock || {};
Drupal.behaviors.collapsiblock = function (context) {
var cookieData = Drupal.Collapsiblock.getCookieData();
var slidetype = Drupal.settings.collapsiblock.slide_type;
var defaultState = Drupal.settings.collapsiblock.default_state;
var slidespeed = parseInt(Drupal.settings.collapsiblock.slide_speed);
$('div.block:not(.collapsiblock-processed)', context).addClass('collapsiblock-processed').each(function () {
var id = this.id;
var titleElt = $(':header:first', this).not($('.content :header',this));
if (titleElt.size()) {
titleElt = titleElt[0];
// Status values: 1 = not collapsible, 2 = collapsible and expanded, 3 = collapsible and collapsed, 4 = always collapsed
var stat = Drupal.settings.collapsiblock.blocks[this.id] ? Drupal.settings.collapsiblock.blocks[this.id] : defaultState;
if (stat == 1) {
return;
}
titleElt.target = $(this).find('div.content');
$(titleElt)
.addClass('collapsiblock')
.click(function () {
var st = Drupal.Collapsiblock.getCookieData();
if ($(this).is('.collapsiblockCollapsed')) {
$(this).removeClass('collapsiblockCollapsed');
if (slidetype == 1) {
$(this.target).slideDown(slidespeed);
}
else {
$(this.target).animate({height:'show', opacity:'show'}, slidespeed);
}
// Don't save cookie data if the block is always collapsed.
if (stat != 4) {
st[id] = 1;
}
}
else {
$(this).addClass('collapsiblockCollapsed');
if (slidetype == 1) {
$(this.target).slideUp(slidespeed);
}
else {
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
}
// Don't save cookie data if the block is always collapsed.
if (stat != 4) {
st[id] = 0;
}
}
// Stringify the object in JSON format for saving in the cookie.
var cookieString = '{ ';
var cookieParts = [];
$.each(st, function (id, setting) {
cookieParts[cookieParts.length] = ' "' + id + '": ' + setting;
});
cookieString += cookieParts.join(', ') + ' }';
$.cookie('collapsiblock', cookieString, {path: Drupal.settings.basePath});
});
// Leave active blocks uncollapsed. If the block is expanded, do nothing.
if (stat == 4 || (cookieData[id] == 0 || (stat == 3 && cookieData[id] == undefined)) && !$(this).find('a.active').size()) {
$(titleElt).addClass('collapsiblockCollapsed');
$(titleElt.target).hide();
}
}
});
};
Drupal.Collapsiblock.getCookieData = function () {
var cookieString = $.cookie('collapsiblock');
return cookieString ? Drupal.parseJson(cookieString) : {};
};
UPDATE:
Problem has been solved by adding the following code:
$('.collapsiblock').not(this).each(function(){
$(this).addClass('collapsiblockCollapsed');
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});
just above the following line:
$(this).removeClass('collapsiblockCollapsed');
Use the not selector.
Example:
$('.collapsiblock').click(function(){
$('.collapsiblock').not(this).each(function(){
$(this).slideUp();
});
$(this).slideDown();
})
这篇关于如何选择所有类除了JQuery中点击的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
