[英]How to target li within ul without using IDs?
我正在嘗試將 eventListeners 附加到我的 HTML 的 ul 中的每個 li。 這是一個家庭作業，所以我根本無法更改 HTML。 這是我的 HTML，我要更改的是 ul class '分頁'中的兩個按鈕：
<body>
<!-- Gallery HTML -->
<section id="gallery">
<h2>Image <strong>Gallery</strong></h2>
<!-- Gallery Image & Details -->
<article>
<p><img
src="images/winter.jpg"
alt="Winter Landscape: Snow covered mountains">
</p>
<h3>Image Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<!-- Thumbnail Pagination -->
<ul class="pagination">
<li><button>previous</button></li>
<li><button>next</button></li>
</ul>
</section>
<!-- Javascript -->
<script src="js/gallery.js"></script>
</body>
我在我的 JavaScript 中試過這個：
let nextButton = pageSection.getElementsByTagName('li:first-of-type');
let prevButton = pageSection.getElementsByTagName('li:last-of-type');
但是，如果我使用 console.log(nextButton) 或 console.log(prevButton)，它們都會在瀏覽器控制台中返回 HTMLcollection []。 我不確定它的目標是否正確。
下面是一個事件監聽器的例子：
nextButton.addEventListener("click", function changeImageNext(){
for (i = 0; i < templateArray.length; i++){
// console.log(articles[i]+ " " + i);
activeArticle = articles.length[i + 1];
// inserts the updated html into the html file
galleryHeading.insertAdjacentHTML('afterend',templateArray[i]);
}
});
但它在瀏覽器中返回此錯誤： Uncaught TypeError: nextButton.addEventListener is not a function
我這周才開始學習 JavaScript 和 HTML，所以我還不精通。 另外，我不能使用 JQuery 或任何類型的框架！
謝謝你的幫助！
既然你知道你有兩個li的.pagination內部，你可以使用document.querySelectorAll ，它返回一個元素數組。 只需定位數組中元素的索引即可。 例子：
let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];
prevButton.addEventListener('click', (event) => {
});
nextButton.addEventListener('click', (event) => {
});
document.getElementsByTagName("LI")
這將為您返回所有 li 標簽的列表。 循環遍歷該列表 select 按索引，隨心所欲。
因為你沒有其他的 li 在你的身體里你真的不需要擔心任何特殊的選擇器
"li:last-of-type" 不正確，但 getElementsByTagName 只是希望接受要查找的標簽名稱。 沒有任何特殊的 sudo 類
試試看：
let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]
如何在沒有任何ID的情況下以javascript DOM中ul和li中的某個元素為目標
[英]How to target a certain element in ul and li in javascript DOM without any IDs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.