javascript - JavaScript - 如何知道单击了哪个对象

问题描述

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

我该如何找出点击了哪部电影并且只传递这个对象的属性而不是每个对象？我需要使用循环吗？

添加了屏幕截图，例如，如果我单击第一部电影“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);

}

标签： javascript

也许你想看看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>

javascript - JavaScript - 如何知道单击了哪个对象

问题描述

解决方案

推荐阅读