javascript class - cómo seleccionar todas las clases excepto el elemento cliqueado en JQuery?




selector elementos (4)

Prueba esto,

Ejemplo:

$('.collapsiblock').click(function(){
   $('.collapsiblock').not(this).slideUp();
   $(this).slideDown();
});

Esta es una mejor manera porque si usa cada función para que se cargue y en el futuro tenga más de miles de div entonces tomará mucho tiempo para SlideUp o SlideDown.

Tengo un sitio web desarrollado en Drupal. Utilizo un módulo llamado collapsiblock (básicamente es un plugin de JQuery) para lograr el efecto de acordeón. Está funcionando bien conmigo (aunque está en Beta). Pero quiero modificarlo para que cuando el usuario haga clic en un elemento del acordeón, los demás artículos colapsen.

En sus estadísticas actuales, funciona de manera que cuando el usuario hace clic en un elemento, verifica si el elemento ya está contraído o expandido y hará que el elemento sea el opuesto. Eso significa que si el usuario hace clic en un elemento, se expandirá y, si hace clic en otro elemento, también se expandirá, pero no colapsará el elemento que se hizo clic anteriormente.

Puedes ver el código a continuación. Sé dónde debo agregar el código para colapsar y cómo colapsar y expandir. Mi pregunta es: ¿cómo selecciono todos los elementos que tienen la clase '.collapsiblock' excepto aquella en la que el usuario ha hecho clic?

Nota: el elemento que tiene la clase '.collapsiblockCollapsed' se contrae y si esta clase se elimina del elemento se expande.

// $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) : {};
};

ACTUALIZAR:

El problema ha sido resuelto agregando el siguiente código:

$('.collapsiblock').not(this).each(function(){
                $(this).addClass('collapsiblockCollapsed');
                $(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
             });

justo arriba de la siguiente línea:

$(this).removeClass('collapsiblockCollapsed');

Usa el selector not .

Ejemplo:

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})

Puede hacer un seguimiento de qué elemento ya se ha hecho clic con su propio controlador de clic de jquery y la función de datos de jquery (...). Luego, filtre iterando sus elementos de .collapsiblock con la función de filtro de jquery (...) para incluir los elementos que necesita.


Si lo que quiere encontrar ya está en una cadena, y no tiene a mano un manual de expresión regular, puede usar unir / dividir:

    function replaceMulti(haystack, needle, replacement)
    {
        return haystack.split(needle).join(replacement);
    }

    someString = 'the cat looks like a cat';
    console.log(replaceMulti(someString, 'cat', 'dog'));





javascript jquery drupal content-management-system javascript-framework