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

您可以使用.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演示

您应该将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()填充）将被执行。因此，将您的代码更改为：

 $(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");
     }
   });
 });

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

如果你正在寻找一个更短、更干净的代码（正如其他用户所提到的），你可以这样做（而不会对你的代码进行巨大的更改）：

 $(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");
     }
   });
 });

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

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

$(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");
    }
  });
});

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

或更短的

$(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");
    }
  });
});

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

使用以下代码：

 $("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事件，这就是它工作不正常的原因。

您可以使用以下代码

$(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')也将返回true