目前我正在进行电影搜索，我已经提供了它的屏幕截图。
正如您在剪辑中看到的，每个结果旁边都有一个按钮。
我想将该值分配给该按钮，以便我可以使用该标题而不是原始搜索重新运行新搜索。
根据我自己的研究，我认为我可能需要从each语句更改为for循环，但这只是一个猜测。
希望能提供 jsfiddle 示例的任何帮助
下面的截图，
到目前为止，我还包含了所有代码。
<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>
最佳答案
基于此 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() );
});
关于javascript - 向站点添加搜索功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22875505/