javascript - 创建一个变量，其中包含单击的 div 的 id

Question

有人知道如何创建一个包含单击的 div id 的变量吗？

我想隐藏页面加载时除了第一个之外的所有#content-wrappers，然后当单击.square以显示与已单击的id具有相同类的div时，它不会'当你写下 id 时，没有多大意义，但如果你看看我的 fiddle ，那么它应该有意义吗？

http://jsfiddle.net/alexjamest/Lkaxza22/

$('#content-wrapper').hide();

$(".square").click(function() {
var id_name= $(this).attr(id);
if $('#content-wrapper').hasClass(id_name){
 $(this).fadeIn();   
}
}); 


<div id="content-wrapper" class="c1">Content 1</div>
<div id="content-wrapper" class="c2">Content 2</div>
<div id="content-wrapper" class="c3">Content 3</div>
<div id="content-wrapper" class="c4">Content 4</div>
<div id="content-wrapper" class="c5">Content 5</div>
<div id="content-wrapper" class="c6">Content 6</div>
<div id="content-wrapper" class="c7">Content 7</div>
<div id="content-wrapper" class="c8">Content 8</div>

<div class="square" id="c1"></div>
<div class="square" id="c2"></div>
<div class="square" id="c3"></div>
<div class="square" id="c4"></div>
<div class="square" id="c5"></div>
<div class="square" id="c6"></div>
<div class="square" id="c7"></div>
<div class="square" id="c8"></div>

Answer 1

更改您的content-wrapper元素，以便它们包含类，而不是 ID，因为id 应该是唯一的。但是，您可以使用某种前缀来标识您的内容，例如 content-:

<div class="content-wrapper" id="content-c1">Content 1</div>
<div class="content-wrapper" id="content-c2">Content 2</div>
<div class="content-wrapper" id="content-c3">Content 3</div>
<div class="content-wrapper" id="content-c4">Content 4</div>
<div class="content-wrapper" id="content-c5">Content 5</div>
<div class="content-wrapper" id="content-c6">Content 6</div>
<div class="content-wrapper" id="content-c7">Content 7</div>
<div class="content-wrapper" id="content-c8">Content 8</div>

然后下面的代码将起作用:

$(document).ready(function()
{
        $(".content-wrapper").hide();
        $(document).on("click", ".square", function()
        {
            var id = $(this).attr("id");
            $("#content-"+id).fadeIn();   
        });
});

注意以下部分

$(".content-wrapper").hide();

这很重要，因为我们确定我们希望隐藏包含 class content-wrapper 的所有元素，而不是 id 内容包装。

Working Demo .