1
デフォルトのテキストに表示されているように、「詳細なテキストを知りたい場合はシンボルをタップしてください。」は、他のテキストの下にhtmlの<br>と表示されます。JavaScript内のテキスト間にスペースを作成
ページのどこかをクリックすると（テキストではなく）、デフォルトのテキストが表示されます。現在の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>
ありがとうございました！これは簡単なことではありませんでした。 – Peterssoen