JavaScript - 如何知道哪个对象被点击

Question

我有一个基本的电影搜索，现在我正在尝试这样做，一旦你点击一部电影，它就会得到点击的电影标题属性，目前它正在从匹配搜索的电影列表中获取每部电影学期。

如何找出已单击的电影并仅传递此对象属性而不是每个对象？ 我需要使用循环吗？

添加了屏幕截图，例如，如果我单击第一部电影“John Wick”，它会为每个包含“John Wick”的电影标题创建一个 h1 标题

 function search() { var userInput = $("#content-container-search").val().replace(/\\s+/g,"%20"); var searchTerm = "".concat(standardURL, apiKey, 'query=', userInput); var request = new XMLHttpRequest(); clear(); //runs the clear function to clear existing DOM results to make way for the new ones request.open('GET', searchTerm , true); request.onload = function(data) { var data = JSON.parse(this.response); createList(data); } request.send(); } function createList(data){ var app = document.getElementById("film-results"); data.results.forEach(film => { console.log(film.title); var filmInfo = film; var Filmcontainer = document.createElement("div"); Filmcontainer.setAttribute("class", "row film-container"); var filmContainerLeftPanel = document.createElement("div"); filmContainerLeftPanel.setAttribute("class", "film-container-left-panel column small-3"); var filmContainerRightPanel = document.createElement("div"); filmContainerRightPanel.setAttribute("class", "film-container-right-panel column small-9"); var li = document.createElement("li"); li.setAttribute("class", "film-container-right-panel-li"); var ul = document.createElement("ul"); var h1 = document.createElement("h1"); h1.setAttribute("class", "film-container-right-panel-h1"); h1.textContent = film.title; var ahref = document.createElement("a"); // ahref.setAttribute("class", "button"); ahref.setAttribute("data-open", "exampleModal1"); var paragraph = document.createElement("p"); paragraph.setAttribute("class", "film-container-right-panel-p"); var paragraphMaxLength = 125; var filmOverview = film.overview; var trimmedFilmOverview = filmOverview.substr(0, paragraphMaxLength); trimmedFilmOverview = trimmedFilmOverview.substr(0, Math.min(trimmedFilmOverview.length, trimmedFilmOverview.lastIndexOf(" "))); trimmedFilmOverview = trimmedFilmOverview + "..."; paragraph.textContent = trimmedFilmOverview; var baseImgURL = "https://image.tmdb.org/t/p/w154" + film.poster_path; var filmImage = document.createElement("img"); filmImage.src = baseImgURL; filmImage.setAttribute("class", "film-container-right-panel-img"); // film.forEach(filmImage.src.indexOf("null")) // filmImage.src = "/img/imagenotavailable.png"; app.appendChild(Filmcontainer); Filmcontainer.appendChild(filmContainerLeftPanel); Filmcontainer.appendChild(filmContainerRightPanel); filmContainerLeftPanel.appendChild(filmImage); filmContainerRightPanel.appendChild(ul) .appendChild(li) .appendChild(ahref) .appendChild(h1); li.appendChild(paragraph); generateModal(filmInfo); }) } function generateModal(filmInfo){ var modal = document.getElementById("exampleModal1"); var h1 = document.createElement("h1"); h1.textContent = filmInfo.title; modal.appendChild(h1); console.log(filmInfo); }

Answer 1

也许你想看看Event.target和currentTarget 。

- 更新 -

下面是一个例子：

 let ctas = document.querySelectorAll('.see-details'); ctas.forEach(cta => { cta.addEventListener('click', (movie) => { let movieId = movie.target.getAttribute('data-movie-id'); console.log(movieId); }); });

 <button data-movie-id="toy-story-1" class="see-details">See movie details</button>

Answer 2

你可以在 JavaScript 中使用event.target来解决这个问题。

 var div = document.createElement('div'); document.body.appendChild(div); var button = document.createElement("button"); button.innerHTML = "John Wick"; button.style.margin= "10px"; div.appendChild(button); var button2 = document.createElement("button"); button2.innerHTML = "John Wick: chapter 2"; button2.style.margin= "10px"; div.appendChild(button2); var button3 = document.createElement("button"); button3.innerHTML = "John Wick: chapter 3"; div.appendChild(button3); function showName(e){ alert("you have clicked "+e.target.innerHTML); } div.addEventListener('click', showName, false);

在这段代码中，我创建了 3 个按钮，每当你点击任何按钮时，它都会触发一个事件 showName 和 event.target 帮助我们获取触发特定事件的元素（即在我们的例子中点击）。

并尝试运行 console.log(event.target)，这将为您提供有关此处触发的事件的全部信息。

我希望这有帮助。