在相同的html上使用相同的脚本和不同的输入

Using same script with different input over same html

本文关键字：输入 脚本 html      更新时间：2023-09-26

im试图制作一个JavaScript，在html代码的不同部分使用相同的代码，脚本从特定的url请求中读取标题、运行时和绘图，并将这些信息放在正确的div中。我该如何做到这一点？

<div>
  <input id="img1" type="radio" name="img-descr">
     <div id="tt0110912"> <!-- Pulp fiction -->
         <h1 id="Title"></h1>
         <p id="Runtime"></p>
         <p id="Plot"></p>
     </div>
</div>
<div>
  <input id="img2" type="radio" name="img-descr">
     <div id="tt0796366"> <!-- Star Trek -->
         <h1 id="Title"></h1>
         <p id="Runtime"></p>
         <p id="Plot"></p>
     </div>
</div>
<div>
  <input id="img3" type="radio" name="img-descr">
     <div id="tt0251413"> <!-- Star Wars -->
         <h1 id="Title"></h1>
         <p id="Runtime"></p>
         <p id="Plot"></p>
     </div>
</div>
<!-- Script para la api de OMDB -->    
<script>            
var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var fullMovie = JSON.parse(xhr.responseText);
            var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot, };
            document.getElementById('Title').innerText = movie.title;
            document.getElementById('Runtime').innerText = movie.runtime;
            document.getElementById('Plot').innerText = movie.plot
        }
    }
    xhr.open('GET', 'variable?', true);
    xhr.send(null);
</script>

每个电影都会调用以下url：

http://www.omdbapi.com/?i=tt0110912&plot=short&r=json  (Pulp Fiction Movie)
http://www.omdbapi.com/?i=tt0796366&plot=short&r=json  (Star Trek Movie)
http://www.omdbapi.com/?i=tt0251413&plot=short&r=json  (Star Wars Movie)

如何使用正确的id向div添加id？i=tt*******信息，所以脚本将正确答案添加到标题、运行时和绘图部分？

考虑到这一点，脚本应该读取div id，使用该id获取信息：

var search = document.getElementById('dividhere').value;
xhr.open('GET', 'http://www.omdbapi.com/?i=+search+&plot=short&r=json', true);
xhr.send();
}

脚本应该读取并运行带有该id信息的xhr.open，将获取的信息放在该div中，并在第二个div上运行脚本，然后在第三个div上再次运行。因此，如果我添加另一个带有新id信息的div，脚本将为新电影加载。

好的，使用JQuery（请使用它）。首先，将类添加到您的div中：

<div class="movie" id="tt0796366"> <!-- Star Trek -->

然后：

$('.movie').each(function(i, item) {
    $.getJSON('http://www.omdbapi.com/?i='+ $(this).attr('id') +'&plot=short&r=json', function(data) {
       $(item).find('h1').html(data.title);
       ....
   });
});

您可以使用JS动态呈现HTML，如下所示(https://jsfiddle.net/6usmu7ny/1/)：

JavaScript

var items = document.querySelectorAll('[name="img-descr"]');
var loaded = [];
for(var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function(evt) {
        renderMovie(evt.target.nextElementSibling)
      }, false);
}
function renderMovie(el) {
    var movie = el.id
    if(loaded.indexOf(movie) !== -1) return;
    loaded.push(movie);
    getMovieInformation(movie, function(data) {
        var title = document.createTextNode(data.Title);
        var runtime = document.createTextNode(data.Runtime);
        var plot = document.createTextNode(data.Plot);
        el.querySelector('#Title').appendChild(title);
        el.querySelector('#Runtime').appendChild(runtime);
        el.querySelector('#Plot').appendChild(plot);
    }); 
};
function getMovieInformation(movie, cb) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var fullMovie = JSON.parse(xhr.responseText);
            cb(fullMovie);
        }
    }
    xhr.open("GET", 'https://www.omdbapi.com/?i='+movie+'&plot=short&r=json');
    xhr.send();
}
相关文章：