.toggleClass（）添加特定點擊的鏈接類

所以，如果我想toggleClass()添加被點擊的特定項目的類，我會如何做到這一點？.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"); 
});

再次感謝！

來源

2013-02-10 weecho

是否必須是一個類？如果您使用數據屬性會更容易。 – Barmar 2013-02-10 20:35:22

我只需要點擊div的具體信息，以便我可以匹配'zoom'div內的內容。因此，如果單擊div a1，內容a1將顯示在'縮放'內 – weecho 2013-02-10 20:47:10

你可以做到這一點的位置，如果它總是會在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 - 使用數據屬性，而不是

來源

2013-02-10 20:27:24 Nope

夥計。尼斯。 Youdabest。 – weecho 2013-02-10 20:49:52

如果我想讓它更健壯幷包含不同的字母會怎樣？或者傳遞標題本身？你會建議我使用單一的ID標籤，而不必通過不同的類來解析嗎？ – weecho 2013-02-10 20:56:34

美麗！再次感謝！ – weecho 2013-02-10 21:00:20

試試這個：

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

.toggleClass（類名）..你可以檢查它here。因此，您可以使用您想要切換的類名作爲toggleClass的參數

來源

2013-02-10 20:25:33 jubair

刪除。因爲它已經上課了。像這樣寫$（this）.toggleClass（'zoom'）; – jubair 2013-02-10 20:32:32

他不想切換'zoom'類，他想切換'a1'，'a2'等。 – Barmar 2013-02-10 20:33:15

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"); 
});

來源

2013-02-10 20:26:10

感謝您的快速回答，這只是完美的。有沒有什麼辦法可以傳遞被點擊的鏈接類，這樣我可以讓'縮放'div包含特定於點擊鏈接的圖片？所以如果點擊了a1，則會顯示a1內容。讓我知道這是否合理 – weecho 2013-02-10 20:29:12

'這樣我可以讓'zoom'div包含特定於被點擊的鏈接的圖像？'這與完全不同於詢問如何將一個類從點擊的div添加到另一個div。你應該把這個重要的信息添加到問題中。 – Nope 2013-02-10 20:33:01

這是在他的示例代碼：'「A1或A2或A3取決於被點擊的是什麼」' – Barmar 2013-02-10 20:34:11

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")); 
});

來源

2013-02-10 20:49:44 Barmar

不要忘記引用'class'屬性的參數。 – Barmar 2013-02-10 20:51:03

+1使用數據屬性將消除訂單問題。但是，您的答案缺失，無法刪除之前添加的任何類，但可以獲得一般想法。 – Nope 2013-02-10 21:02:04

@FrançoisWahl這個問題沒有提到任何有關刪除未點擊的div的類。 – Barmar 2013-02-10 21:06:58

雖然你已經接受一個答案，我被一個問題的解決方案的潛力很感興趣，所以，我想出了這個：

$('.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。

參考文獻：

來源

2013-02-10 20:51:22

.toggleClass（）添加特定點擊的鏈接類

回答

相關問題