添加和删除 class 个不同的元素

Question

所以我目前正在学习 jquery 和一些用于动画的 tweenlite（我想保持基础）。所以我目前正在构建一个投资组合网格，但我想添加一个元素的点击，另一个元素正在淡入（从右边滑动没关系）。

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

我创建了一个代码笔来展示我的挣扎所在。

我希望我对这个问题的描述很清楚:)

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

Answer 1

正如我在评论中提到的，我认为可以找到 box 和 bigbox 之间的共同点，如果我们要不修改 HTML。这个共同点应该是 index 来自它们各自类.

的值

因此，首先在点击处理程序中存储一个 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 的布局顺序。

添加和删除 class 个不同的元素

Add and remove class different elements

javascript

jquery

html

gsap

添加和删​​除 class 个不同的元素

Add and remove class different elements

javascript

jquery

html

gsap

添加和删除 class 个不同的元素