将div设置为数组,以便根据按钮使事物消失/重新显示

问题描述 投票:0回答:2

标题可能没有意义。

基本上我想将所有“.mainContent”存储到X ..

然后,当你单击一个按钮时,它会使x [0]显示为无,并引入x [1] ..如果这是有道理的......那样我可以有相同的擦除过渡,它只会带来我的我会有4个不同的页面。

你可以在这里看到我的页面:我有硬编码的“home”和“了解更多”页面,但我显然不希望每个部分都这样做

http://mikecioffi-me.stackstaging.com/(*这不是手机***)只有桌面。移动版还没有准备好......哈哈

<script>
    var dissapearingTime = 1800;
var nextSlideTime = 3000;
var originalNumber = 0;
var newNumber = 1;
var x = $(this).find('.mainContent');

$('.button').hover(
  function () {
    $('.arrowRight').toggleClass('active');
  })

$('.button').click(
  function () {
    console.log(x);
    $('.sidebar').toggleClass('anim-trans');
    setTimeout(function () {
      $(".hero").css("display", "none");
      $(".blank").css("display", "block");
    }, dissapearingTime);

    setTimeout(function () {
      $('.sidebar').toggleClass('anim-trans');
    }, nextSlideTime);
  })

function hello() {
  $('.sidebar').toggleClass('anim-trans');
  setTimeout(function () {
    $(".blank").css("display", "none");
    $(".hero").css("display", "block");
  }, dissapearingTime);
  setTimeout(function () {
    $('.sidebar').toggleClass('anim-trans');
  }, nextSlideTime);
}
</script>
javascript html css arrays
2个回答
0
投票

我喜欢你的动画:)。

我不知道你如何使用它,但你可以用这种方式。我希望它可以帮到你。

myArray = $('.test');
$(myArray[0]).hide();

https://jsfiddle.net/7rod0vky/2/


0
投票

一种方法是用id标记每个card / div / item,然后你可以使用全局命名空间/ json对象/字典为你自己的页面隐藏显示,它在范围之间保存一些额外的信息。

window.__ok = {'current': '', 'prev': null}
var x = $('.main > div');
['#c0', '#c1', '#c2'].map(function(c,i,a){
  $(c).on('click', function(a){
      window.__ok.prev = window.__ok.current;
      window.__ok.current = i;
      alert(`show ${c} id: ${i} prev: ${window.__ok.prev}`);
      if ($(`#${window.__ok.current}`).css('display') == 'none'){
        $(`#${window.__ok.current}`).css('display', 'block');
        $(`#${window.__ok.prev}`).css('display', 'none');
      }
      
  })
})
.red {
  background-color: red;
  height: 30px;
  display: none
}

.blue {
  background-color: blue;
  height: 30px;
  display: none
}

.green {
  background-color: green;
  height: 30px;
  display: none
}

span {
  color: grey;
  cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div id="0" class="red">a</div>
  <div id="1" class="blue">b</div>
  <div id="2" class="green">c</div>
</div>
<span id="c0">show0</span><br>
<span id="c1">show1</span><br>
<span id="c2">show2</span><br>
© www.soinside.com 2019 - 2024. All rights reserved.