獲取類名稱，然後找到具有與類名匹配的id的元素

Question

我正在嘗試執行一個相當簡單的任務：獲取一個元素的類名並使用與該類匹配的id找到並切換另一個元素的可見性名稱。類名和id都是由php生成的，並且是相同的。

HTML

<div class="button"> 
    <a href="#" class="generatedName"></a> 
</div> 

<div id="generatedName"> 
    <p>Content</p> 
</div> 

jQuery的

jQuery('.container').hide(); 

jQuery('.button a').click(function() { 
    jQuery('div#' + this.class).toggle(); 
}); 

我也試圖讓生成的類和替代使用的this.class變量：

var button = jQuery('.button a').attr('class'); 

我還沒有運氣。任何援助將不勝感激。提前致謝！

Answer 1

在JavaScript（DOM元素），該class屬性className，所以

jQuery('#' + this.className).toggle(); 

Answer 2

您需要使用.prop()或.attr()獲取類名：

jQuery('#' + $(this).attr('class')).toggle(); 

但是，如果你的元素有兩個或多個類代碼將無法正常工作，你應該更好地應用data-* HTML5屬性：

<div class="button"> 
    <a href="#" data-target="generatedName"></a> 
</div> 

那麼你可以使用.data()檢索data-*屬性：

jQuery('#' + $(this).data('target')).toggle(); 

旁註：id必須是唯一的，你可以簡單地使用#代替div#

Fiddle Demo

Answer 3

這工作：

$('.button a').click(function() { 
    var $class = $(this).attr('class'); 
    $('div#' + $class).toggle(); 
}); 

DEMO