我有两个标签,必须使用烂番茄API显示来自不同电影的数据。我的标签#tab4
和#tab5
的数据属性包含电影id
编号,如下所示:
<a href="#" rel="tabs4" id="tab4" data-movie-id="770672122">
然后我得到了这个代码,它将相同的类添加到两个选项卡中,$(this)
应该显示在单击选项卡时应该采用哪个数据属性。
$("#tab4, #tab5").addClass("tab");
$('.tab').click(function(){
var filmID = $(this).attr("data-movie-id");
然后,使用此var
,我在ajax请求中创建url:
$.ajax ({
dataType: "jsonp",
url: "http://api.rottentomatoes.com/api/public/v1.0/movies/" + filmID + ".json?apikey=[your_api_key]",
success: dataHandler,
crossDomain: true
});
问题是只显示#tab4
个内容。即使我删除addClass
并仅将click
函数添加到#tab5
,其数据也会显示在第四个标签内容中。我错过了什么?
HTML:
<li>
<a href="#" rel="tabs4" id="tab4" data-movie-id="770672122">
Tab 4
</a>
</li>
<li>
<a href="#" rel="tabs5" id="tab5" data-movie-id="10591">
Tab 5
</a>
</li>
<div class="tab-content" id="tabs4">
<div class="film">
<div class= "film-info">
<div id="title"></div>
<br>
<div id="year">
<span class="first-word">
Year:
</span>
</div>
<div id="studio">
<span class="first-word">
Studio:
</span>
</div>
<div id="synopsis">
<span class="first-word">
Synopsis:
</span>
</div>
</div>
<div id="poster" class="poster"></div>
</div>
</div>
<div class="tab-content" id="tabs5">
<div class="film">
<div class= "film-info">
<div id="title"></div>
<br>
<div id="year">
<span class="first-word">
Year:
</span>
</div>
<div id="studio">
<span class="first-word">
Studio:
</span>
</div>
<div id="synopsis">
<span class="first-word">
Synopsis:
</span>
</div>
</div>
<div id="poster" class="poster"></div>
</div>
</div>