添加和删​​除类不同的元素 [英] Add and remove class different elements

问题描述

所以我现在正在学习jquery和一点点动画的tweenlite（我想保持它的基本）。所以即时建立一个投资组合网格，但我想添加一个元素的点击，其他元素正在消失（从右侧滑动并不重要）。

但我无法找到一种方法使其工作，即1个元素有1个框显示，另一个元素有不同的框显示，而不需要一遍又一遍地重复代码，并且每次都更改一个简单的数字，但必须有一种方法使其工作，而不会重复代码一遍又一遍。

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

我希望我很清楚地描述这个问题：）

HTML
p>

 < div class =box> 
< div class =show>显示1< / div> 
< / div> 
 
< div class =bigbox> 
< div class =removeit> 
< div class =bigshow> Bigshow 1< / div> 
< / div> 
< / div> 
 
< div class =box> 
< div class =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; 
背景：黄色; 
 text-align：center; 
光标：指针; 
 margin：0 auto; 
 float：left; 
 margin-right：50px; 
} 
 
 .bigbox {
 height：100％; 
宽度：100％; 
 background-color：gray; 
 z-index：100; 
剩下：0; 
 opacity：0; 
位置：固定; 
 display：none; 
 top：0; 
 .removeit {
 height：100px; 
 width：100px; 
 top：0; 
 right：0; 
 background-color：blue; 
 margin：0 auto; 
光标：指针; 
} 
} 
 
 .show {
 display：block; 
} 
 .noscroll {
 overflow：hidden; 
 
  

Javascript

<$ p （）。$ b $（。bigbox）。addClass（show）;
TweenLite.to（。）; $（'。bigbox'），0.5，{
opacity：1，
autoAlpha：1
}）;
}）;
$ b $（。removeit）。click（function（）{
TweenLite.to（$。'bigbox'），0.5，{
autoAlpha：0，
opacity：0
}）;
}）;

codepen

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

解决方案

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

• 因此，存储 clickedIndex 变量首先，在点击处理程序
  内部像这样： var clickedIndex = $（'。box'）。index（$（this））; 。 = $（。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（ 
 TweenLite.to（bigbox，0.5，{opacity：1，autoAlpha：1}）; 
}）; 
 
 removeItElements.click（函数（）{
 clickedIndex = removeItElements.index（$（this））; 
 bigbox = bigboxElements.eq（clickedIndex）; 
 TweenLite .to（bigbox，0.5，{autoAlpha：0，opacity：0}）; 
}）; 
  

这种方法唯一的问题在于它非常依赖HTML的排列顺序布局。

So im currently learning jquery and a little bit of tweenlite for animations (I wanna keep it basic). So im currently building a portfolio grid but I wanna add on a click of an element that the other element is fading in (sliding from right it doesn't matter).

But I can't find a way to make it work that 1 element have 1 box to show and the other element have a different box to show without coping the code over and over and change a simple number everytime, there must be a way to make it work without going to repeat the code over and over.

I created a codepen to show where my struggles are.

I hope I'm pretty clear with describing this problem :)

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

The codepen

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

解决方案

As I mentioned in comments, I think it is possible by finding the common ground between box and bigbox and if we are to not modify HTML. That common ground should be the index value from their respective classes.

• So store a clickedIndex variable first, inside the click handler like so: var clickedIndex=$('.box').index($(this));.
• And then feed this clickedIndex to get a selective bigbox like so: var bigbox=$(".bigbox").eq(clickedIndex);.
• And finally, use this bigbox variable further to fade in or out.

Here is your modified 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});
});

The only problem with this approach is that it is very dependant on the order with which the HTML has been laid out.

这篇关于添加和删​​除类不同的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！