添加和删除不同元素的类

Question

添加和删除不同元素的类

javascriptjqueryhtmlgsap

3

我目前正在学习jQuery和一点TweenLite动画库（我想保持基本）。所以我正在构建一个作品集网格，但我想在点击元素时添加其他元素的淡入效果（从右侧滑入不重要）。

但是，我无法找到一种方法使得一个元素有一个要显示的盒子，而另一个元素有一个不同的盒子要显示，而不必一遍又一遍地复制代码并每次更改一个简单的数字。必须有一种方法可以使其正常工作而不需要重复编写代码。

我创建了一个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

- Dennis

你担心HTML中的代码重复吗？在JavaScript中没有看到任何重复的内容？请再详细说明一下？ - Tahir Ahmed

好的，嗯，你在HTML中有一个带有内容的box1，当你点击该box1时，必须显示一个带有一些内容的div（在html中为bigbox）。但是我已经有了代码来实现这个功能。但现在我也想让box2以与box1相同的方式打开，但由于我在javascript中针对的是box1，所以我需要复制javascript并将box1更改为box2，以便使用相同的方法处理box2。这似乎非常无用，因为你不断重复着相同的代码。我找不到一种方法来创建一行代码，像“box1链接到bigbox1（它们同时打开），box2链接到bigbox2（就像那样）”这样做某些事情。 - Dennis

希望这比我楼上写的更清晰一些。 :) - Dennis

当然。解决这个问题的一种方法是找到box和bigbox之间的共同点，即它们在各自类中的索引号。这样，您就可以获取所点击的box的索引，并通过将此点击索引提供给它来获取相关的bigbox。明白了吗？ - Tahir Ahmed

你是在寻找类似这种的东西吗？http://jsfiddle.net/XwN2L/ - crazymatt

当我再次谷歌我的问题时，我也发现了这个。我已经尝试过修改它以我喜欢的方式，我理解它的工作原理，但只有转换从左上角开始（？），我找不到让淡出转换起作用的方法，我目前得到的是这个http://codepen.io/denniswegereef/pen/MwjrgL - Dennis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tahir Ahmed · Accepted Answer

如我在评论中提到的那样，如果我们不修改HTML，通过找到box和bigbox之间的共同点，我认为这是可能的。这个共同点应该是它们各自类别的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布局的顺序。