Question

有没有人知道如何创建一个包含被点击的div的id的变量？

我希望在页面加载之外隐藏所有#content-wrappers而不是第一个。然后当点击.square时它显示与被点击的id相同的类的div，它没有'当你写下id时你会有多大意义，但是如果你看着我的小提琴那么它应该有意义吗？

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();

这很重要，因为我们要确定我们希望隐藏包含类 content-wrapper的所有元素，而不是 id {{ 1}}。

Working Demo

Answer 2

您的代码有四个问题：

$('#content-wrapper').hide();只会隐藏具有该ID的第一个元素，因为ID必须是唯一的。改为使用普通类。
var id_name= $(this).attr(id);。 id是一个未定义的变量。您可能想要传递字符串"id"，或者更好，只需访问DOM元素的属性：this.id。
if $('#content-wrapper').hasClass(id_name){是语法错误。条件必须放在parhenthesis中：
```
if ($('#content-wrapper').hasClass(id_name)) {
```
然而，仅凭这一点不会使条件有效，因为#content-wrapper只会选择第一个元素。只需按类选择相应的元素：
```
 $('.' + this.id).fadeIn(); 
```
您还可以添加.content-wrapper以进行更精细的过滤：
```
 $('.content-wrapper.' + this.id).fadeIn(); 
```

固定代码：

$('.content-wrapper').hide(); // give that class to all elements instead of the ID

$(".square").click(function() {
   $('.' + this.id).fadeIn();  
});

DEMO

Answer 3

一个没有JQuery的解决方案，仍然使用淡入淡出动画。

在加载时，它获取一组按钮和一组内容包装器，然后它只是使用该命令来确定要显示的框。只能使用相同数量的按钮和包装器。我开始在样式表中看不见包装器，所以我们只需要揭示它们。还要记住最后点击了哪些按钮并重置其可见性。

<head>
    <style>
    .content-wrapper{
        opacity:0;
        transition:opacity 1s ease;/* only showing the normal one, prefixed may be required for portability*/
    }
    </style>
    <script>
    window.addEventListener('load',onload,false);
    var wrappers;
    var buttons;
    var last; 
    function onload(){

        wrappers = document.getElementsByClassName('content-wrapper');
        buttons = document.getElementsByClassName('square');

        var i = buttons.length;
        while(i--) // add listener for each button
            buttons[i].addEventListener('click',onclick,false);

    }
    function onclick(){
        if(last)wrappers[last].style.opacity = '0.0'; //hide previous
        var i = buttons.indexOf(this);
        wrappers[i].style.opacity = '1.0'; //show clicked
        last = i;
    }
</script>
</head>
<body>
    <div class='content-wrapper'></div>
    <div class='content-wrapper'></div>
    <div class='content-wrapper'></div>
    <div class='content-wrapper'></div>
    <div class='content-wrapper'></div>
    <div class='square'></div>
    <div class='square'></div>
    <div class='square'></div>
    <div class='square'></div>
    <div class='square'></div>
</body>

创建一个包含clicked div的id的变量

3 个答案: