创建一个效果，使元素fadeIn和fadeOut不使用fadeToggle（）

Question

你知道，我使用if else来实现这个目标，它只是不起作用。我想我可能会犯一些错误。这些代码来自W3Schools，我把它改成了这个样子。

$(document).ready(function() {
  if ($("button").text() == "Click to fade in boxes")
    $("button").click(function() {
      $("#div1").fadeIn();
      $("#div2").fadeIn();
      $("#div3").fadeIn();
      $("button").text("Click to fade out boxes");
    });
  else
    $("button").click(function() {
      $("#div1").fadeOut();
      $("#div2").fadeOut();
      $("#div3").fadeOut();
      $("button").text("Click to fade in boxes");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

Answer 1

您可以使用.fadeToggle()以及.text()回调函数中的三元运算符来缩短代码：

$(document).ready(function(){
    $("button").click(function(){
        $("#div1,#div2,#div3").fadeToggle();
        $(this).text(function() {
            return $(this).text() == "Click to fade in boxes" ? "Click to fade out boxes" : "Click to fade in boxes"
        });
    });
});

<强> jsFiddle Demo

Answer 2

问题是你只在页面加载时检查条件，你需要在点击处理程序

中测试它

＆＃13;

＆＃13;

$(document).ready(function() {
  $("button").click(function() {
    if ($(this).text().trim() == "Click to fade in boxes") {
      $("#div1, #div2, #div3").fadeIn();
      $(this).text("Click to fade out boxes");
    } else {
      $("#div1, #div2, #div3").fadeOut();
      $(this).text("Click to fade in boxes");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

＆＃13;

＆＃13;

＆＃13;

---

或更短

＆＃13;

＆＃13;

$(document).ready(function() {
  var $divs = $("#div1, #div2, #div3");
  var $btn = $("button").click(function() {
    if ($btn.text().trim() == "Click to fade in boxes") {
      $divs.fadeIn();
      $btn.text("Click to fade out boxes");
    } else {
      $divs.fadeOut();
      $btn.text("Click to fade in boxes");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该将if/else放入click事件中。因为，当你把它放在click之外时（你的方式），只有click个事件处理程序中的一个会被附加。参见：

$(document).ready(function() {
  // in document.load, this condition will be true
  if ($("button").text() == "Click to fade in boxes")
    // so you will have this function attached
    $("button").click(function() {
      // your stuffs
    });
  // but this one is false
  else
    // so this line, never get executed
    $("button").click(function() {
      // your stuffs
    });
});

正如您所看到的，只有第一组代码（fadeIn()内容）才会被执行。因此，请将代码更改为：

＆＃13;

＆＃13;

 $(document).ready(function() {
   $("button").click(function() {
     if ($("button").text() == "Click to fade in boxes") {
       $("#div1").fadeIn();
       $("#div2").fadeIn();
       $("#div3").fadeIn();
       $("button").text("Click to fade out boxes");
     } else {
       $("#div1").fadeOut();
       $("#div2").fadeOut();
       $("#div3").fadeOut();
       $("button").text("Click to fade in boxes");
     }
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

＆＃13;

＆＃13;

＆＃13;

如果您正在寻找更短更干净的代码（正如其他用户提到的那样），您可以这样做（代码中没有太大的变化）：

＆＃13;

＆＃13;

 $(document).ready(function() {
   $("button").click(function() {
     if ($("button").text() == "Click to fade in boxes") {
       $("#div1, #div2, #div3").fadeIn(); // this will affect all div1, div2, and div3
       $("button").text("Click to fade out boxes");
     } else {
       $("#div1, #div2, #div3").fadeOut(); // this one too.
       $("button").text("Click to fade in boxes");
     }
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用以下代码：

 $("button").on("click", function() {
    if ($("button").text() == "Click to fade in boxes") {
        $("#div1").fadeIn();
        $("#div2").fadeIn();
        $("#div3").fadeIn();
        $("button").text("Click to fade out boxes");
    }
    else {
        $("#div1").fadeOut();
        $("#div2").fadeOut();
        $("#div3").fadeOut();
        $("button").text("Click to fade in boxes");
    }
});

您已使用相同的按钮两次附加onClick事件，这就是它无法正常工作的原因。

Answer 5

您可以使用以下代码

$(document).ready(function() {
    $("button").click(function() {
        if($("#div1,#div2,#div3").is(':visible')){
            $("#div1,#div2,#div3").fadeOut();
            $("button").text("Click to fade in boxes");                
        }
        else{
            $("#div1,#div2,#div3").fadeIn();
            $("button").text("Click to fade out boxes");
        }
    });
});

注意：即使一个元素可见，$("#div1,#div2,#div3").is(':visible')也会返回