通过单击图像在一个容器中显示/隐藏差异信息：隐藏之前显示信息

Question

我目前正在学习JavaScript和jQuery，并尝试通过单击图像（例如投资组合）在div中填充一些信息。

当我单击图像时，div填充有详细信息，每个图像各不相同，并且单击后显示或隐藏div。

当我通过单击第一张图像的信息填充div，然后单击第二张图像时，如果第一个内容仍然是“显示”，则隐藏当前内容以显示第二个信息图片。

我的问题是，在隐藏切换开关之前，我可以看到第一张图像的内容。

注意：很抱歉，如果我不太清楚，我的英语很不好...

注2：如果这个问题已经在这里解决了，很抱歉，我搜索了很多，但没有找到任何东西...

这是CodePen：https://codepen.io/benCat/pen/oPdEMm

这是代码：

var portfolioDescription = {
  toggleDescription: document.createElement("div"),
  contentDescription: document.createElement("div"),

  init: function() {
    var portfolio = document.getElementById("portfolio");

    this.toggleDescription.id = "toggle-description";

    portfolio.appendChild(this.toggleDescription);

    $("#toggle-description").hide();

    this.contentDescription.classList.add("content-description");
    this.toggleDescription.appendChild(this.contentDescription);

    this.content();
  },

  content: function() {
    var self = this;

    $("#click-01").click(function() {
      if (self.toggleDescription.classList.contains("first-active")) {
        self.toggleDescription.classList.remove("first-active");
        $("#toggle-description").hide(1000);
      } else if (self.toggleDescription.classList.contains("second-active")) {
        self.toggleDescription.classList.remove("second-active");

        $("#toggle-description").hide(1000);
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("first-active");
      } else if (self.toggleDescription.classList.contains("third-active")) {
        self.toggleDescription.classList.remove("third-active");
        $("#toggle-description").hide(1000);
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("first-active");
      } else {
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("first-active");
      }

      self.contentDescription.innerHTML = "<p>Test 01</p>";
    });

    $("#click-02").click(function() {
      if (self.toggleDescription.classList.contains("second-active")) {

        self.toggleDescription.classList.remove("second-active");
        $("#toggle-description").hide(1000);
      } else if (self.toggleDescription.classList.contains("first-active")) {

        self.toggleDescription.classList.remove("first-active");

        $("#toggle-description").hide(1000);
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("second-active");

      } else if (self.toggleDescription.classList.contains("third-active")) {

        self.toggleDescription.classList.remove("third-active");

        $("#toggle-description").hide(1000);
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("second-active");

      } else {
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("second-active");
      }

      self.contentDescription.innerHTML = "<p>Test 02</p>";

    });

    $("#click-03").click(function() {

      if (self.toggleDescription.classList.contains("third-active")) {

        self.toggleDescription.classList.remove("third-active");
        $("#toggle-description").hide(1000);

      } else if (self.toggleDescription.classList.contains("first-active")) {

        self.toggleDescription.classList.remove("first-active");
        $("#toggle-description").hide(1000);
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("third-active");

      } else if (self.toggleDescription.classList.contains("second-active")) {

        self.toggleDescription.classList.remove("second-active");
        $("#toggle-description").hide(1000);
        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("third-active");

      } else {

        $("#toggle-description").show(1000);

        self.toggleDescription.classList.add("third-active");
      }

      self.contentDescription.innerHTML = "<p>Test 03</p>";
    });
  }
};

portfolioDescription.init();

#portfolio {
  display: flex;
}

#toggle-description {
  width: 100%;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 1em;
}

.content-description p {
  margin: 0;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="portfolio">
  <div id="click-01">
    <figure>
      <img src="https://fakeimg.pl/250x150/">
    </figure>
  </div>

  <div id="click-02">
    <figure>
      <img src="https://fakeimg.pl/250x150/">
    </figure>
  </div>

  <div id="click-03">
    <figure>
      <img src="https://fakeimg.pl/250x150/">
    </figure>
  </div>

</div>

有了它，我很确定你会理解我的（我希望...）

我知道，这不是最好的方法，因此，如果您想给我建议，请不要犹豫，我先谢谢您：）

感谢您的阅读！

benCat

Answer 1

您遇到的问题是由于toggleDescription div的动画。如果您延迟更新此div的内容，则会获得预期的效果

用setTimeout调用将div内容更新的行换行：

setTimeout(function() {
    self.contentDescription.innerHTML = "<p>Test 01</p>";
}, 1000);