如何从单独的图像中获得唯一的alt值

Question

我想创建一个保留alt值的函数，这样我就可以获得电影的名称并将其传输到下一个网页。

<div class="now-showing">
<ul class="movie-items">
<li>
<img id="a" src="/images/movie-a.jpg" alt="Movie A">
<button><a href="/html/bookticket.html" onClick="getMovieName()">BOOK</a></button>
</li>
<li>
<img id="a" src="/images/movie-b.jpg" alt="Movie B">
<button><a href="/html/bookticket.html" onClick="getMovieName()">BOOK</a></button>                      
</li>
<li>
<img id="a" src="/images/movie-c.jpg" alt="Movie C">
<button><a href="/html/bookticket.html" onClick="getMovieName()">BOOK</a></button>
</li>
</ul>
</div>

我知道我对每个项目都有相同的id名称，但目前我总共有14部电影，所以我希望有一个单一的功能，可以获得每个项目唯一的alt值。目前，无论我点击哪个电影链接，它都会使用以下功能显示"电影A"：

function getMovieName() {
let link = document.getElementById('a');
let movieInfo = [];
movieInfo.push(link.alt);
console.log(movieInfo);
};

Answer 1

您可以从LI的结构中检测点击了哪个A(并找到匹配的IMG标签)。

function getMovieName(e) {
e.preventDefault();  // stop the browser from immediately going to a.href
let link = e.target; // the link that was clicked
let img = link.closest("li").querySelector("img"); // the img that is in the same grandparent "li" tag as the link that was clicked
console.log(img.alt);
};

<div class="now-showing">
<ul class="movie-items">
<li>
<img src="/images/movie-a.jpg" alt="Movie A">
<button><a href="/html/bookticket.html" onClick="getMovieName(event)">BOOK</a></button>
</li>
<li>
<img src="/images/movie-b.jpg" alt="Movie B">
<button><a href="/html/bookticket.html" onClick="getMovieName(event)">BOOK</a></button>                      
</li>
<li>
<img src="/images/movie-c.jpg" alt="Movie C">
<button><a href="/html/bookticket.html" onClick="getMovieName(event)">BOOK</a></button>
</li>
</ul>
</div>

Answer 2

您的HTML无效，每个ID都应该是唯一的。

您的代码不起作用，因为.getElementById返回找到的第一个元素。

只需为每个电影使用不同的id