Question

目前我正在进行电影搜索，其中包含了截图。

正如您在剪辑中看到的那样，每个结果旁边都有一个按钮。

我想将该值分配给该按钮，以便我可以使用该标题重新运行新搜索，而不是原始搜索。

从我自己的研究中，我认为我需要从每个语句改为for循环，但这只是猜测。

会喜欢任何帮助你能提供的jsfiddle例子会被爱

屏幕截图下面， enter image description here

到目前为止，我还包含了所有代码。

 <html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie',
    input,
    movieName,
    key = '?api_key='API KEY';

    $('#search').click(function() {
        var input = $('#movie').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName ,
            dataType: 'jsonp',
            success: function(data) {

        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="150" height="200"></td><td class="results-title">' + value.original_title + '</td><td class="results-date">' + value.release_date + 
          '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
        });
        $('#searchresult').html(table);
            }
        });
    });
});

</script>
<script text="text/javascript">
// When the more button is click this runs a search using the title of the movie 
$(document).on('click', '.search-btn', function() {
    getImdbInfo( $(this).closest('td').prev('.results-title').text() );
});

//The function below takes the entered title and searchs imdb for a match then it displays as followed

function getImdbInfo(Title) {
    var url = "http://www.omdbapi.com/?t=" + Title;
    $.ajax({
      url: url,
      cache: false,
      dataType: "jsonp",
      success: function(data) {

            var str = "";
            str += "<h2>Title :" +data.Title+ "</h2>";
            str += "<p>Year :" +data.Plot+ "</p>";

            $("#chosenresult").html(str);
      },
      error: function (request, status, error) { alert(status + ", " + error); }
    });
}
</script>
</head>
<body>
<center>
<h1>Movie Search</h1>
<input id="movie" type="text" /><button id="search">Search</button>
</center>
<div id="searchresult"></div>
<div id="chosenresult"></div>
</body>
</html>

Answer 1

基于此HTML

<tr>
    <td><img src="http://... .jpg" alt="" width="150" height="200"></td>
    <td>300</td>
    <td>2006-12-08</td>
    <td><button id="MoreInfo">Few More Info</button></td>
</tr>

...您应该能够使用DOM遍历来获取搜索的标题，如下所示：

$(document).on('click', 'td button', function() {
    getImdbInfo( $(this).closest('tr').('td').eq(2).text() );
});

但是，我觉得你在每个按钮上都有相同的ID值，这是无效的。您应该在您的结构中处理一些类，然后将其作为目标，如下所示：

<tr>
    <td class="results-img"><img src="http://... .jpg" alt="" width="150" height="200"></td>
    <td class="results-title">300</td>
    <td class="results-date">2006-12-08</td>
    <td class="results-search-btn"><button class="search-btn" id="MoreInfo_1">Few More Info</button></td>
</tr>

...

$(document).on('click', '.search-btn', function() {
    getImdbInfo( $(this).closest('td').prev('.results-title').text() );
});

将搜索功能添加到站点

1 个答案: