我想调用一个函数，该函数使用JQuery从链接的点击中获取参数
我是JQuery的新手，对不起，如果这样转储......
我有这个网站（在我的电脑上）
我使用此代码创建：
<!DOCTYPE html>
<html>
<head>
<title>Video Finder</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
})
$('#submitform').click(function(){
var action = $(this).parent().attr('action');
action += '&query=' + $(this).parent().find('input[name="query"]').val() + '&language=es' ;
//window.location.href = action;
$("#PageSelector td").parent().remove();
$("#userdata td").parent().remove();
$.getJSON(action, function(data) {
var myNext = action + "&page=" + parseInt(parseInt(data.page) + 1) //https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=black&language=es&page=2 (Next Page)
var myPrev = action + "&page=" + parseInt(parseInt(data.page) - 1) //https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=black&language=es&page=0 (Previous page)
var myNextLink
var myPrevLink
if (parseInt(data.page) >= parseInt(data.total_pages)) {
myNextLink = "___"
} else {
myNextLink = "<a id= "NextPage" href=" + myNext + " class="call-btn"> >>> </a>" //here is where i have the link to renew the table
}
if (parseInt(data.page) <= parseInt(1)) {
myPrevLink = "___"
} else {
myPrevLink = "<a id= "PrevPage" href=" + myPrev + " class="call-btn"> <<< </a>" //here is where i have the link to renew the table
}
var nPage = "<tr>" + "<td> Número Página: " + parseInt(parseInt(data.page)) + myPrevLink + "____" + myNextLink + "</td>" + "</tr>"
var tResults = "<tr>" + "<td> Total Resultados: " + data.total_results + "</td>" + "</tr>"
var tPage = "<tr>" + "<td> Número Página: " + data.total_pages + "</td>" + "</tr>"
$(nPage).appendTo("#PageSelector tbody");
$(tPage).appendTo("#PageSelector tbody");
$(tResults).appendTo("#PageSelector tbody");
});
$.getJSON(action, function(data) {
$.each(data.results, function(i, f) {
var myPic = "https://image.tmdb.org/t/p/w500" + f.poster_path
var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path
var tblRow = "<tr>" + "<td>"
+ f.vote_count + "</td>" + "<td>"
+ f.id + "</td>" + "<td>"
+ f.video + "</td>" + "<td>"
+ f.vote_average + "</td>" + "<td>"
+ f.title + "</td>" + "<td>"
+ f.popularity + "</td>" + "<td>"
+ "<img src=" + myPic + ">" + "</td>" + "<td>"
+ f.original_language + "</td>" + "<td>"
+ f.original_title + "</td>" + "<td>"
+ f.genre_ids + "</td>" + "<td>"
+ "<img src=" + myBac + ">" + "</td>" + "<td>"
+ f.adult + "</td>" + "<td>"
+ f.overview + "</td>" + "<td>"
+ f.release_date + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
});
//Here are my function... that does not work!
$(".call-btn").click(function(aLink){
$("#userdata td").parent().remove();
$.getJSON(aLink, function(data) {
$.each(data.results, function(i, f) {
var myPic = "https://image.tmdb.org/t/p/w500" + f.poster_path
var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path
var tblRow = "<tr>" + "<td>"
+ f.vote_count + "</td>" + "<td>"
+ f.id + "</td>" + "<td>"
+ f.video + "</td>" + "<td>"
+ f.vote_average + "</td>" + "<td>"
+ f.title + "</td>" + "<td>"
+ f.popularity + "</td>" + "<td>"
+ "<img src=" + myPic + ">" + "</td>" + "<td>"
+ f.original_language + "</td>" + "<td>"
+ f.original_title + "</td>" + "<td>"
+ f.genre_ids + "</td>" + "<td>"
+ "<img src=" + myBac + ">" + "</td>" + "<td>"
+ f.adult + "</td>" + "<td>"
+ f.overview + "</td>" + "<td>"
+ f.release_date + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
<body>
<!-- Form part -->
<!-- bdd8feef -->
<!-- http://www.omdbapi.com/?i=tt0978762&apikey=bdd8feef -->
<!-- 1ca8226c006afb25adc4c816a2f8c184 -->
<!-- https://api.themoviedb.org/3/discover/movie?api_key=1ca8226c006afb25adc4c816a2f8c184 -->
<!-- https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=star+wars&page=1 -->
<!-- Just a button <button type="button">Click Me!</button> -->
<h2>Video</h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form action="https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184" method="post" target="_blank">
Buscar:<br>
<input type="text" name="query" value="black">
<br>
<br>
<button type="button" id="submitform">Submit</button>
</form>
<br><br><br>
<table id="PageSelector">
<thead>
</thead>
<tbody></tbody>
</table>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>Total de votos</th>
<th>Id TMDB</th>
<th>Video</th>
<th>Promedio de votos</th>
<th>Titulo</th>
<th>Popularidad</th>
<th>Poster</th>
<th>Lenguaje original</th>
<th>Titulo Original</th>
<th>Generos</th>
<th>Background</th>
<th>Para Adultos</th>
<th>Sinopsis</th>
<th>Fecha de lanzamiento</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
好吧，当用户点击Submit时，用户会收到：
每个页面都是20个N项目的列表，可能是N个页面，我需要设置一个带有“Page Selector”的“>>>”来转到项目的每一页清单（20乘20）
我想要的是设置带有“>>>”的链接来更新表格，以及查询中接下来的20个项目。
Heres是我的失败......
//Here are my function... that does not work!
$(".call-btn").click(function(aLink){
$("#userdata td").parent().remove();
$.getJSON(aLink, function(data) {
$.each(data.results, function(i, f) {
var myPic = "https://image.tmdb.org/t/p/w92" + f.poster_path
var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path
var tblRow = "<tr>" + "<td>"
+ f.vote_count + "</td>" + "<td>"
+ f.id + "</td>" + "<td>"
+ f.video + "</td>" + "<td>"
+ f.vote_average + "</td>" + "<td>"
+ f.title + "</td>" + "<td>"
+ f.popularity + "</td>" + "<td>"
+ "<img src=" + myPic + ">" + "</td>" + "<td>"
+ f.original_language + "</td>" + "<td>"
+ f.original_title + "</td>" + "<td>"
+ f.genre_ids + "</td>" + "<td>"
+ "<img src=" + myBac + ">" + "</td>" + "<td>"
+ f.adult + "</td>" + "<td>"
+ f.overview + "</td>" + "<td>"
+ f.release_date + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
但我不知道如何从这里调用该函数（以防万一......）：
"<a id= "NextPage" href=" + myNext + " class="call-btn"> >>> </a>" //here is where i have the link to renew the table
使用该字符串，我创建一个<a href:"url" class="call-btn"> link </a>尝试用户只是转到项目的下一页，但不起作用。
这是我想要的seudo代码：
<a href="url" onclick="myFunction(url)"> link </a>
myFunction(url){
//to recreate the table using the JSON file
$.getJSON(url, function(data) {
$.each(data.results, function(i, f) {
var myPic = "https://image.tmdb.org/t/p/w92" + f.poster_path
var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path
var tblRow = "<tr>" + "<td>"
+ f.vote_count + "</td>" + "<td>"
+ f.id + "</td>" + "<td>"
+ f.video + "</td>" + "<td>"
+ f.vote_average + "</td>" + "<td>"
+ f.title + "</td>" + "<td>"
+ f.popularity + "</td>" + "<td>"
+ "<img src=" + myPic + ">" + "</td>" + "<td>"
+ f.original_language + "</td>" + "<td>"
+ f.original_title + "</td>" + "<td>"
+ f.genre_ids + "</td>" + "<td>"
+ "<img src=" + myBac + ">" + "</td>" + "<td>"
+ f.adult + "</td>" + "<td>"
+ f.overview + "</td>" + "<td>"
+ f.release_date + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
}
2 个答案:
答案 0 :(得分：0)
使用preventDefault来避免href行为：
myFunction(event, url) {
event.preventDefault();
}
答案 1 :(得分：0)
你应该可以做一些事情，比如将onclick="myFunction(url)"更改为onclick="return myFunction(this)"然后你的方法可以做类似的事情
myFunction(link){
//to recreate the table using the JSON file
//link.href is the href on the <a> clicked
$.getJSON(link.href, function(data) {
...
});
//return false to cancel the link processing
return false;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？