JavaScript中的多个if's可以做多种事情

Multiple if's in JavaScript to do multiple things

本文关键字：if JavaScript      更新时间：2023-09-26

我有一个div，包含3个不同的div。

我需要帮助来实现一个智能切换功能。

因此，当父div被单击时，它将检查哪个div是可见的，并对每个div有一个特定的操作。

所以如果Div1是可见的，做X如果Div2可见，则执行Y如果div3可见，则执行Z

$(".button").click(function() {
  if ($('.div1', this).is(':visible')) {
    $(".div1", this).hide();
    $(".div2", this).show();
  }
  if ($('.div2', this).is(':visible')) {
    $(".div2", this).hide();
    $(".div3", this).show();
    $(".divtemp", this).show();
  }
  if ($('.div3', this).is(':visible')) {
    $(".div3", this).hide();
    $(".div1", this).show();
    $(".divtemp", this).hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="button">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="divtemp"></div>
</div>

问题是，当这段代码运行时，它正确地运行了整个代码，因为每个"if"都满足了下一个"if"。

这可能是基本的编程，但如果有人能帮助它将非常感激!

  • S
  1. 你可以缓存DOM元素，而不是一次又一次地潜入DOM
  2. 使用else if作为排他性条件
  3. 当你想在多个元素上执行相同的功能时，使用多个选择器

见代码内嵌注释

$(".button").click(function() {
  var self = this, // Cache
    div1 = $('.div1', self), // Cache
    div2 = $('.div2', self), // Cache
    div3 = $('.div3', self), // Cache
    divtemp = $('.divtemp', self); // Cache
  if (div1.is(':visible')) {
    div1.hide();
    div2.show();
  } else if (div2.is(':visible')) { // Use else if
    div2.hide();
    div3.show();
    divtemp.show();
  } else if (div3.is(':visible')) { // Use else if
    div1.show();
    div3.hide();
    divtemp.hide()
  }
});

好吧，如果我明白你想要什么，你可能只需要添加"else"子句。最重要的是，你必须处理click事件，而你做错了。

$(".button").on('click', function(e){
    e.preventDefault(); //this way you prevent the default click actions;
    if($(".div1").is(":visible")){
        //Do stuff
    }else if $(".div2").is(":visible"){
        //Do other stuff
    }else if(){}
    ...
})
相关文章：