coolio83000 coolio83000 - 2 months ago 11
HTML Question

Fusion of two similar document ready with different classes

These two document ready works fine, I just want to have them in one.

My goal is to have .flipperfr.click works only on .flip1fr, .flipfr

and .flipperen.click works only on .flip1en, .flipen

because when i put them together .flipperfr.click or .flipperen.click work on

all classes. here is my two js functions:

$(document).ready(function() {
var $flips = $('.flip1fr, .flipfr ');
$(".flipperfr").click(function() {
var $cur = $(this).next().stop().slideToggle("fast");
$flips.not($cur).stop().slideUp()
});
});


$(document).ready(function() {
var $flips = $('.flip1en, .flipen ');
$(".flipperen").click(function() {
var $cur = $(this).next().stop().slideToggle("fast");
$flips.not($cur).stop().slideUp()
});
});


UPDATE
It doesn't work but at the beginning I wanted to use a an easy way like :

$(document).ready(function() {
var $flips = $('.flip1fr, .flipfr '); $('.flip1en, .flipen ');
$(".flipperfr"); $(".flipperen").click(function() {
var $cur = $(this).next().stop().slideToggle("fast");
$flips.not($cur).stop().slideUp()
});
});


BECAUSE, only this part is different between the two functions,

var $flips = $('.flip1fr, .flipfr '); $(".flipperfr").click(function() {
var $flips = $('.flip1en, .flipen '); $(".flipperen").click(function() {


UPDATE2, The problem here is that all works fine but only from one side, when i go the flipperen the other block stay visible, and don't hide like flipperfr. I did something wrong ?

$(document).ready(function() {
var $flips = $('.flip1fr, .flipfr ');
var $flips = $('.flip1en, .flipen ');
$(".flipperfr, .flipperen").click(function() {
var $cur = $(this).next().stop().slideToggle("fast");
$flips.not($cur).stop().slideUp()
});
});


OR

$(document).ready(function() {
var
$flips = $('.flip1fr, .flipfr ');
$flips = $('.flip1en, .flipen ');
$(".flipperfr, .flipperen").click(function() {
var $cur = $(this).next().stop().slideToggle("fast");
$flips.not($cur).stop().slideUp()
});
});

Answer

Perhaps something like this

$(document).ready(function() {
  var $flips = {
    fr: $('.flip1fr, .flipfr '),
    en: $('.flip1en, .flipen ')
  }

  $(".flipperfr, .flipperen").click(function() {
    var lang = $(this).hasClass('flipperfr') ? 'fr' : 'en';
    var $cur = $(this).next().stop().slideToggle("fast");
    $flips[lang].not($cur).stop().slideUp();
    // or without $flips
    $('.flip1' +lang + ', .flip' +lang ).not($cur).stop().slideUp();
  });
});