だから私がやろうとしていることは、いくつかの証言カードを表示させることです。詳細表示/非表示ボタン付き。クリックすると、その特定の紹介文のテキストに表示する内容を増やしたり減らしたりしたい。しかし、現時点では、私の機能は、すべての推薦状に表示するテキストの数を増やしたり減らしたりしています。助けてください、何が欠けているのかわかりません。
const testimonialCards = document.querySelectorAll('#feedback-text'); //returns nodelist
const testimonialArray = Array.from(testimonialCards); //converts nodelist to array
const showMoreButton = document.querySelectorAll('.js-show-more');
const showMoreButtonArray = Array.from(showMoreButton);
//looping through the testimonial cards
testimonialArray.forEach(e => {
//looping through buttons array
showMoreButtonArray.forEach(t => {
//adding onclick method to the buttons
t.addEventListener('click', function() {
//conditional to check if the hidden exists, if so so, remove it and add the show all class etc.
if (e.classList.contains('excerpt-hidden')) {
e.classList.remove('excerpt-hidden');
e.classList.add('showAllContent');
showMoreButton.innerText = "Show Less";
} else {
e.classList.add('excerpt-hidden');
e.classList.remove('showAllContent');
showMoreButton.innerText = "Show More";
}
});
});
});/*Css for show more text and show less using the height of the text container*/
.js-show-more {
border: 0;
border-radius: 0;
background-color: unset;
color: #b83426;
text-transform: uppercase;
cursor: pointer;
}
/*truncating text*/
.excerpt-hidden {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
height: 65px;
width: 80%;
margin: 0 auto 1em;
}
.showAllContent {
height: auto;
overflow: initial;
-webkit-line-clamp: none;
}<!--This is my testimonial card, I would have about 8 cards on pageload-->
<testimonial class="testimonial-card" flag="sa.svg">
<h4>Title</h4>
<p class="excerpt-hidden expanded-text" id="feedback-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button class="js-show-more">Show More</button>
</testimonial>これでうまくいくはずです：
const testimonialCards = document.querySelectorAll('#feedback-text'); //returns nodelist
const showMoreButtons = document.querySelectorAll('.js-show-more');
//looping through buttons array
showMoreButtons.forEach((t, i) => {
//adding onclick method to the buttons
t.addEventListener('click', function() {
const e = testimonialCards[i]
// conditional to check if the hidden exists, if so so,
// remove it and add the show all class etc.
if (e.classList.contains('excerpt-hidden')) {
e.classList.remove('excerpt-hidden');
e.classList.add('showAllContent');
t.innerText = "Show Less";
} else {
e.classList.add('excerpt-hidden');
e.classList.remove('showAllContent');
t.innerText = "Show More";
}
});
});/*Css for show more text and show less using the height of the text container*/
.js-show-more {
border: 0;
border-radius: 0;
background-color: unset;
color: #b83426;
text-transform: uppercase;
cursor: pointer;
}
/*truncating text*/
.excerpt-hidden {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
height: 65px;
width: 80%;
margin: 0 auto 1em;
}
.showAllContent {
height: auto;
overflow: initial;
-webkit-line-clamp: none;
}<testimonial class="testimonial-card" flag="sa.svg">
<h4>Title</h4>
<p class="excerpt-hidden expanded-text" id="feedback-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button class="js-show-more">Show More</button>
</testimonial>
<testimonial class="testimonial-card" flag="sa.svg">
<h4>Title 2</h4>
<p class="excerpt-hidden expanded-text" id="feedback-text">
It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button class="js-show-more">Show More</button>
</testimonial>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加