使用 jQuery 切换特定元素

Question

我整理了一张建筑物的地图，想法是当您单击特定楼层时，以上所有内容都会出现或消失。问题是，如果你点击二楼，上面的都消失了，如果你改变主意，直接点击一楼，一楼和二楼就会消失，但是那些被隐藏的首先现在会重新出现，让它有点乱。有人知道如何纠正吗？预先感谢大家的时间和关注。

//Floors above cicked disappear
$('.floors').click(function() {
  var which = $(this).attr('id');
  if (which == 'basement') {
    $('#ground, #first, #second, #third, #fourth').animate({
      opacity: 'toggle',
    }, 500);
  } else if (which == 'ground') {
    $('#first, #second, #third, #fourth').animate({
      opacity: 'toggle',
    }, 500);
  } else if (which == 'first') {
    $('#second, #third, #fourth').animate({
      opacity: 'toggle',
    }, 500);
  } else if (which == 'second') {
    $('#third, #fourth').animate({
      opacity: 'toggle',
    }, 500);
  } else if (which == 'third') {
    $('#fourth').animate({
      opacity: 'toggle',
    }, 500);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floors-container">
  <div id="fourth" class="floors">
    <img src="floor.svg" alt="fourth hall map representation">
  </div>
  <!-- #fourth -->

  <div id="third" class="floors">
    <img src="floor.svg" alt="third hall map representation">
  </div>
  <!-- #third -->

  <div id="second" class="floors">
    <img src="floor.svg" alt="second hall map representation">
  </div>
  <!-- #second -->

  <div id="first" class="floors">
    <img src="floor.svg" alt="first hall map representation">
  </div>
  <!-- #first -->

  <div id="ground" class="floors">
    <img src="floor.svg" alt="ground-floor hall map representation">
  </div>
  <!-- #ground -->

  <div id="basement" class="floors">
    <img src="floor.svg" alt="basement-floor hall map representation">
  </div>
  <!-- #basement -->
</div>
<!-- #floors-container -->

Answer 1

我会写这样的东西。我宁愿使用 CSS3 过渡来制作不透明动画。不管怎样：

var doAnimate = function (selector) {
    $(selector).fadeOut(500);
};

$(".floors").on("click", function () {
    var which = $(this).attr("id");

    switch (which) {
        case "basement":
            doAnimate("#ground, #first, #second, #third, #fourth");
            break;
        case "ground":
            doAnimate("#first, #second, #third, #fourth");
            break;
        case "first":
            doAnimate("#second, #third, #fourth");
            break;
        case "second":
            doAnimate("#third, #fourth");
            break;
        case "third":
            doAnimate("#fourth");
            break;
    }

});

编辑：保存代码

var doAnimate = function (selector) {
    $(selector).fadeOut(500);
};

var ids = ["#basement", "#ground", "#first", "#second", "#third", "#fourth"];

$(".floors").on("click", function () {
    var which = "#" + $(this).attr("id");
    var whichIndex = ids.indexOf(which);
    var selector = ids.splice(whichIndex).join(", ");
    doAnimate(selector);
});

FIDDLE ==> https://jsfiddle.net/tonysamperi/tub033wy/

编辑：可再次点击 CSS

.faded{
    opacity: 0.5;
}

JS

  var fadeClass = "faded";

  var reset = function(){
      var selector = ids.join(", ");
      $(selector).removeClass(fadeClass);
  }

  var ids = ["#basement", "#ground", "#first", "#second", "#third", "#fourth"];

  $(".floors").on("click", function() {
      var clicked = $(this);
     if(clicked.hasClass(fadeClass)){
        return;
    }
    var which = "#" + clicked.attr("id");
    var idsCopy = ids.slice();
   var whichIndex = idsCopy.indexOf(which);
   var selector = idsCopy.splice(whichIndex+1).join(", ");
   $(selector).toggleClass(fadeClass);
 });

fiddle ==> https://jsfiddle.net/tonysamperi/704uqu46/

Answer 2

在这种情况下，您可能应该设置不透明度而不是切换。这将使您对可能的行为有更多的控制。一个非常粗鲁的实现方式可能是：

$('.floors').click(function() {
    var which = $(this).attr('id');

    //resets everything
    $('#ground, #first, #second, #third, #fourth').css('opacity', 0);

    if(which == 'basement') {
        $('#ground, #first, #second, #third, #fourth').animate({
        opacity: 1,
        }, 500);
    } else if(which == 'ground') {
        $('#first, #second, #third, #fourth').animate({
        opacity: 1,
        }, 500);
    } else if(which == 'first') {
        $('#second, #third, #fourth').animate({
        opacity: 1,
        }, 500);
    } else if(which == 'second') {
        $('#third, #fourth').animate({
        opacity: 1,
        }, 500);
    } else if(which == 'third') {
        $('#fourth').animate({
        opacity: 1,
        }, 500);
    }
});

使用 jQuery 切换特定元素

Use jQuery to toggle specific elements

javascript

jquery

jquery-animate