正如您在默认文字中看到的那样，没有点击任何地方，“点击符号，如果你想知道更多文字”被放置在html中<br>的其他文本下方。
当您单击页面上的某个位置（而不是任何文本）时，它应显示默认文本。但是当前的javascript代码会显示没有<br>的文本，所以它们都在一起。
即使我想回到默认文本，是否有一些智能方法将文本设置为默认值。 符号文本上的点按应仅在默认文本中可见，因此当您按任何其他“按钮”时不应显示该文本。
$(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>
答案 0 :(得分：4)
您只需使用html()而不是使用text()，当您在文字之间切换时，您将保留br。正如您在documentation中所读到的那样：
.text（）方法的结果是包含的字符串 所有匹配元素的组合文字。 （由于HTML的变化 在不同浏览器中的解析器，返回的文本可能在换行符中有所不同 和其他白色空间。）
因此，使用text()您将丢失所有标记，这就是您需要.html()的原因：
获取匹配集中第一个元素的 HTML内容 元件。
$(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>