Question

我是Javascript和jQuery的新手，虽然我很兴奋，我对此有了更好的了解，但我知道我正在接受这个问题 - 很长的路要走。这里的想法是包含4个产品的4个块，通过单击一个将扩展所选块并隐藏其余块。请参阅下面的代码。我假设至少有更简单的方法或更简洁，但请告诉我，如果这样做很好。

  $(function () {
      var state = true;
      $("#toggler").click(function () {
          if (state) {
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);

              $("#effect").animate({
                  backgroundColor: "#D1F4FF",
                  color: "#fff",
                  width: 700,
              }, 1000);
          } else {
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);

          }
          state = !state;
      });
      var state2 = true;
      $("#toggler2").click(function () {
          if (state2) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);


              $("#effect2").animate({
                  backgroundColor: "#aa0000",
                  color: "#fff",
                  width: 700
              }, 1000);
          } else {
              $("#effect").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);

          }
          state2 = !state2;
      });

 var state3 = true;
      $("#toggler3").click(function () {
          if (state3) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#aa0000",
                  color: "#fff",
                  width: 700
              }, 1000);
          } else {
              $("#effect").show({
                  duration: 1000
              });
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);

          }
          state3 = !state3;
      });
      var state4 = true;
      $("#toggler4").click(function () {
          if (state4) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#aa0000",
                  color: "#fff",
                  width: 700
              }, 1000);
          } else {
              $("#effect").show({
                  duration: 1000
              });
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);

          }
          state4 = !state4;
      });
  });

Answer 1

你提到了

这里的想法是包含4个产品的4个块，通过单击一个将扩展所选块并隐藏其余块。

您正在寻找的功能与JQuery中的Tab Control非常相似，您是否可以尝试一下，让我们知道它是否适合您的目的？
如果您希望改进代码，请在codereview.stackexchange.com中根据评论建议发布您的问题吗？

关于简化这个的任何想法？

1 个答案: