获取类名，然后查找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