javascript - 在javascript中的文本之间创建空间

Question

正如您在默认文本上看到的那样，无需单击任何地方，“如果您想了解更多文本，请点击符号”位于其他文本下方，带有 <br>在 html 中。

当您单击页面上的某处(而不是任何文本)时，它应该显示默认文本。但当前的 javascript 代码显示没有 <br> 的文本所以一切都在一起了。

即使我想返回默认文本，是否有一些聪明的方法可以将文本设置为默认文本。 Tap on the symbol 文本应仅在默认文本中可见，因此当您按下任何其他“按钮”时不应显示它。

$(document).ready(function() {
  // Put all the images in a JavaScript array
  var $imgs = $(".section-link");

  // If you store your content in an array of objects, you can do this without creating
  // more than one display div. You'll just get the content from the object in the
  // array that has the same index as the image (within a different array)
  var data = [{
      title: "Fair trade",
      text: "The Process from start is fair to all who are included in making our clothes."
    },
    {
      title: "Toxicfree",
      text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
    },
    {
      title: "Fair Trade",
      text: "The Process from start is fair to all who are included in making our clothes."
    },
    {
      title: "Toxicfree",
      text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
    },
    {
      title: "Quality",
      text: "Our clothes have sustainable and high quality."
    },
    {
      title: "Organic",
      text: "All the materials and processes are fully organic and friendly to our planet."
    },
    {
      title: "Vegan",
      text: "We care about the animals, all clothes are crueltyfree and vegan."
    },
  ];

  // Get reference to the output area
  var $outputDiv = $(".section-display");
  var defaulttext = $outputDiv.find(".text1").text()
  var defaultTitle = $outputDiv.find(".title1").text();


  // Set a click event handler for each of the images
  $imgs.on("click", function() {
    // Find the child elements within the output div that need updating and
    // extract the content from the array of objects that correspond
    // to the index of the image that was clicked.
    $This = $(this)
    $(".title1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".title1", $outputDiv).text(data[$This.index() - 1].title)
        .animate({
          opacity: 1
        });
    });
    $(".text1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".text1", $outputDiv).text(data[$This.index() - 1].text)
        .animate({
          opacity: 1
        });
    })
  });

  $(document).on("click", function(e) {
    if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
      $(".title1", $outputDiv).animate({
        opacity: 0
      }, function() {
        $(".title1", $outputDiv).text(defaultTitle)
          .animate({
            opacity: 1
          });
      });
      $(".text1", $outputDiv).animate({
        opacity: 0
      }, function() {
        $(".text1", $outputDiv).text(defaulttext)
          .animate({
            opacity: 1
          });
      })
    }
  })
});

.section-link {
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section-link small-solid-circle-p4 fair-d">
  <h2>
    <nobr>FAIR-TRADE</nobr>
  </h2>
</div>
<div class="section-link small-solid-circle-p4 toxic-d">
  <h2>TOXICFREE</h2>
</div>
<div class="section-link small-solid-circle-p4 quality-d">
  <h2>QUALITY</h2>
</div>
<div class="section-link small-solid-circle-p4 organic-d">
  <h2>ORGANIC</h2>
</div>
<div class="section-link small-solid-circle-p4 vegan-d">
  <h2>VEGAN</h2>
</div>
<div class="section-display active info-p4">
  <h2 class="title1">Conscious fashion</h2>
  <h2 class="text1">ut tristique lorem purus id mauris. Maecenas placerat a nibh sed imperdiet. Curabitur eget nulla rutrum, mollis sapien quis, finibus diam. Aenean congue, sapien et tempus vestibulum, dolor elit molestie lorem, in consectetur arcu leo ac elit. Vestibulum
    commodo nisi sit amet mi dictum fringilla. Proin rutrum consectetur velit sit amet auctor. In neque nisl, iaculis pharetra varius non, sodales non magna..<br>
    <br> Tap on the symbols if you want to know more.</h2>
</div>

Answer 1

您只需要使用 html() 而不是使用 text()，当您在文本之间切换时，您将保留您的 br。正如您在 documentation 中所读到的那样:

The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)

因此，通过使用 text()，您将丢失所有标签，这就是您需要 .html() 的原因:

Get the HTML contents of the first element in the set of matched elements.

$(document).ready(function() {
  // Put all the images in a JavaScript array
  var $imgs = $(".section-link");

  // If you store your content in an array of objects, you can do this without creating
  // more than one display div. You'll just get the content from the object in the
  // array that has the same index as the image (within a different array)
  var data = [{
      title: "Fair trade",
      text: "The Process from start is fair to all who are included in making our clothes."
    },
    {
      title: "Toxicfree",
      text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
    },
    {
      title: "Fair Trade",
      text: "The Process from start is fair to all who are included in making our clothes."
    },
    {
      title: "Toxicfree",
      text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
    },
    {
      title: "Quality",
      text: "Our clothes have sustainable and high quality."
    },
    {
      title: "Organic",
      text: "All the materials and processes are fully organic and friendly to our planet."
    },
    {
      title: "Vegan",
      text: "We care about the animals, all clothes are crueltyfree and vegan."
    },
  ];

  // Get reference to the output area
  var $outputDiv = $(".section-display");
  var defaulttext = $outputDiv.find(".text1").html()
  var defaultTitle = $outputDiv.find(".title1").html();


  // Set a click event handler for each of the images
  $imgs.on("click", function() {
    // Find the child elements within the output div that need updating and
    // extract the content from the array of objects that correspond
    // to the index of the image that was clicked.
    $This = $(this)
    $(".title1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".title1", $outputDiv).html(data[$This.index() - 1].title)
        .animate({
          opacity: 1
        });
    });
    $(".text1", $outputDiv).animate({
      opacity: 0
    }, function() {
      $(".text1", $outputDiv).html(data[$This.index() - 1].text)
        .animate({
          opacity: 1
        });
    })
  });

  $(document).on("click", function(e) {
    if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
      $(".title1", $outputDiv).animate({
        opacity: 0
      }, function() {
        $(".title1", $outputDiv).html(defaultTitle)
          .animate({
            opacity: 1
          });
      });
      $(".text1", $outputDiv).animate({
        opacity: 0
      }, function() {
        $(".text1", $outputDiv).html(defaulttext)
          .animate({
            opacity: 1
          });
      })
    }
  })
});

.section-link {
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section-link small-solid-circle-p4 fair-d">
  <h2>
    <nobr>FAIR-TRADE</nobr>
  </h2>
</div>
<div class="section-link small-solid-circle-p4 toxic-d">
  <h2>TOXICFREE</h2>
</div>
<div class="section-link small-solid-circle-p4 quality-d">
  <h2>QUALITY</h2>
</div>
<div class="section-link small-solid-circle-p4 organic-d">
  <h2>ORGANIC</h2>
</div>
<div class="section-link small-solid-circle-p4 vegan-d">
  <h2>VEGAN</h2>
</div>
<div class="section-display active info-p4">
  <h2 class="title1">Conscious fashion</h2>
  <h2 class="text1">Our goal is to help the customer understand the<br> backside of the fashion industry and how you as a<br> customer canmake conscious, environmentally and<br> animal-friendly choices without compromising on<br> your style.<br>
    <br> Tap on the symbols if you want to know more.</h2>
</div>