添加和删除类不同的元素

所以即时通讯学习jQuery和一点点的动画Tweenlite（我想保持它的基本）。所以即时建立一个投资组合网格，但我想添加一个元素的点击，其他元素正在淡入（从右滑没有关系）。添加和删除类不同的元素

但我不能找到一种方法，使工作是1元有1个框来显示和其他元素有不同的框来显示，而不遍地应对代码和改变一个简单的数字，每次，必须成为一种无需反复重复代码即可工作的方法。

我创建了一个codepen来显示我的挣扎在哪里。

我希望我是一个描述这个问题:)

HTML

<div class="box"> 
    <div class="show">Show 1</div> 
    </div> 

    <div class="bigbox"> 
    <div class="removeit"> 
     <div class="bigshow">Bigshow 1</div> 
    </div> 
    </div> 

    <div class="box"> 
    <div class="show">Show 2</div> 
    </div> 

    <div class="bigbox"> 
    <div class="removeit"> 
     <div class="bigshow">Bigshow 2</div> 
    </div> 
    </div> 

</div>

CSS

.container { 
    overflow: auto; 
    margin: 0 auto; 
    width:500px; 
} 

.box { 
    height:200px; 
    width:200px; 
    background:yellow; 
    text-align:center; 
    cursor:pointer; 
    margin:0 auto; 
    float:left; 
    margin-right:50px; 
} 

.bigbox { 
    height:100%; 
    width:100%; 
    background-color: grey; 
    z-index:100; 
    left:0; 
    opacity: 0; 
    position: fixed; 
    display:none; 
    top:0; 
    .removeit { 
    height:100px; 
    width: 100px; 
    top: 0; 
    right:0; 
    background-color: blue; 
    margin:0 auto; 
    cursor:pointer; 
    } 
} 

    .show { 
    display:block; 
    } 
    .noscroll { 
    overflow:hidden; 
    }

的Javascript

$(".box").click(function(){ 
    $(".bigbox").addClass("show"); 
    TweenLite.to($('.bigbox'), 0.5, { 
     opacity:1, 
     autoAlpha:1 
    }); 
}); 

$(".removeit").click(function(){ 
    TweenLite.to($('.bigbox'), 0.5, { 
     autoAlpha:0, 
     opacity:0 
    }); 
});

很清楚该codepen

http://codepen.io/denniswegereef/pen/MwjOXP

来源

2015-05-21 Dennis

你担心HTML中的代码重复？没有看到任何重复的JavaScript？请详细说明一下吗？ –

好吧，你有HTML内容的东西就像box1，当你点击那个box1时，必须有一个div显示一些内容（HTML中的bigbox）。但是这对我的代码是可行的。但现在我想要box 2以与box1相同的方式打开，但是因为我在javascript中将box1作为目标，所以我需要复制javascript并将box1更改为box2，以便与box2执行相同的操作。这似乎很没用，因为你不断重复代码。我无法找到一种方法来创建一个类似于“box1链接bigbox1（它们同时打开）box2链接到bigbox2（类似于）的代码行 – Dennis

我希望这比一个更清晰一点我在楼上写下了:) – Dennis

正如我在评论中提到的，我认为这是可能通过寻找箱和bigbox之间的共同点，如果我们要不要修改HTML。该共同点应该是来自其各自类的索引值。

所以存储clickedIndex变量首先，单击处理里面，像这样：var clickedIndex=$('.box').index($(this));。
然后喂这个clickedIndex得到一个有选择的bigbox像这样：var bigbox=$(".bigbox").eq(clickedIndex);。
最后，使用这个bigbox变量进一步淡入或淡出。

这是你修改的JavaScript：

var bigbox = null; 
var clickedIndex = -1; 
var boxElements=$(".box"); 
var bigboxElements=$(".bigbox"); 
var removeItElements=$(".removeit"); 
boxElements.click(function() { 
    clickedIndex = boxElements.index($(this)); 
    bigbox = bigboxElements.eq(clickedIndex); 
    bigbox.addClass("show"); 
    TweenLite.to(bigbox, 0.5, {opacity: 1,autoAlpha: 1}); 
}); 

removeItElements.click(function() { 
    clickedIndex = removeItElements.index($(this)); 
    bigbox = bigboxElements.eq(clickedIndex); 
    TweenLite.to(bigbox, 0.5, {autoAlpha: 0,opacity: 0}); 
});

用这种方法唯一的问题是，它非常依赖与该HTML已经奠定了顺序。

来源

2015-05-21 20:48:37

这很聪明，不得不重新读了几次才明白它在做什么。感谢这个，绝对有实验过。感谢男人 – Dennis

很高兴帮助。顺便说一句，** TweenMax **中有一个'onComplete'回调，用于添加/删除类*在完成动画之后的问题。让我知道你是否需要帮助。 –

现在很好，我已经很高兴它的作品，并会尝试更多的东西。我会把它留在脑海里，即时通过一个很大的学习曲线，所以maby在将来变得有用:) – Dennis

添加和删除类不同的元素

回答

相关问题