.toggleClass() добавляет определенный класс ссылок на клик

Question

Так что, если я хочу toggleClass(), чтобы добавить класс определенного элемента, который был нажат, как бы я это сделал?

Я знаю, что это как основная синтаксическая вещь, но я довольно новичок в jQuery, поэтому любая помощь будет оценена. Более конкретно, у меня есть что-то вроде этого:

<div class=zoom></div> 

<div> 
    <div class=grid info a1></div> 
    <div class=grid info a2></div> 
    <div class=grid info a3></div> 
</div> 

---

$(".grid.info").click(function() { 
    $('.zoom').toggleClass("A1 or A2 or A3 depending on which was clicked"); 
}); 

Еще раз спасибо!

Answer 1

Вы можете сделать это позиционное, если она всегда будет в порядке a1, a2, a3, etc..:

$(".grid.info").click(function() {  
    $(".grid.info").not(this).each(function(){ 
     var classToRemove = "a" + ($(this).index() + 1); 
     $('.zoom').removeClass(classToRemove); 
    }); 

    var classClicked = "a" + ($(this).index() + 1); 
    $('.zoom').toggleClass(classClicked); 
}); 

---

Demo - тумблер топор класс щелкнули DIV, удалить все другие ранее кликали топор

---

выше работает только если заказ всегда совпадает, но если ваши дивы в другом порядке, а затем index() становится бесполезным, и вы должны смотреть на добавление, возможно, данных-атрибутов, например:

<div class="grid info a3" data-class="a3">3</div> 
<div class="grid info a2" data-class="a2">2</div> 
<div class="grid info a1" data-class="a1">1</div> 

Использование данных-атрибутов, как уже предлагалось бы более ре ответственность и вы скрипт только немного меняется следующим образом:

$(".grid.info").click(function() {  
    $(".grid.info").not(this).each(function(){ 
     var classToRemove = $(this).data("class"); 
     $('.zoom').removeClass(classToRemove); 
    }); 

    var classClicked = $(this).data("class"); 
    $('.zoom').toggleClass(classClicked); 
}); 

---

DEMO - Использование атрибутов данных вместо

---

Answer 2

Попробуйте это:

$(".grid.info").click(function() { 
     $(this).toggleClass('.zoom'); 
    }); 

.toggleClass (имя класса) .. Вы можете проверить это here. Таким образом, вы можете использовать ClassName, которое вы хотите переключить как параметр toggleClass

Answer 3

Example of how to do this on jsFiddle.

HTML:

<div class="zoom"> 
    Zoom 
</div> 

<div> 
    <div class="grid info a1">1</div> 
    <div class="grid info a2">2</div> 
    <div class="grid info a3">3</div> 
</div> 

CSS:

.zoom { 
    display: none; 
} 

.show { 
    display: block; 
} 

JavaScript:

$(".grid.info").click(function() { 
    $('.zoom').toggle("show"); 
}); 

Answer 4

HTML:

<div class="zoom"></div> 

<div> 
    <div class="grid info a1" data-class="a1"></div> 
    <div class="grid info a2" data-class="a2"></div> 
    <div class="grid info a3" data-class="a3"></div> 
</div> 

JS:

$(".grid.info").click(function() { 
    $('.zoom').toggleClass($(this).data("class")); 
}); 

Answer 5

В то время как вы уже приняли ответ, я был заинтригован потенциал решения вашей проблемы, поэтому я пришел с этим:

$('.grid').click(function(){ 
    var theClass = /(a\d)/.exec(this.className).shift(), 
     curClass = /(a\d)/.exec($('.zoom').get(0).className), 
     exClass = curClass !== null ? curClass.shift() : ''; 
    console.log(theClass === exClass); 
    if (exClass == theClass) { 
     $('.zoom').removeClass(theClass); 
    } 
    else { 
     $('.zoom') 
     .removeClass(exClass) 
     .addClass(theClass); 
    } 
}); 

JS Fiddle demo.

Ссылки:

• addClass().
• get().
• regexp.exex().
• removeClass().
• Array.shift()