Question

我有一个基本的电影搜索功能，现在我正尝试使它成为可能，以便一旦您单击电影，它就会获得被单击的电影标题属性，此刻它正在将所有电影列表匹配搜索词。

我该如何找出被单击的胶片，并且仅通过此对象属性而不是每个对象？我需要使用循环吗？

添加了屏幕截图，例如，如果我单击第一部电影“约翰·威克”，它将为每个具有“约翰·威克”的电影标题创建一个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），这将为您提供有关此处触发的事件的全部信息。

我希望这会有所帮助。

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

2 个答案: