Question

我已经把一张建筑物的地图拼凑在一起，并且想法是当你点击一个特定的楼层时，所有上面的都会出现或消失。问题是，如果您点击二楼，例如上面的所有内容都消失了，如果您改变主意并直接点击底层，那么第一层和第二层将消失，但那些已被隐藏首先，现在将重新出现，使它有点混乱。任何人都有任何想法，如何纠正？提前感谢大家的时间和关注。

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

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 ==＆gt; 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); });

小提琴==＆gt; 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切换特定元素

2 个答案: