在两个单独的选项卡中显示JSON中的不同数据

时间:2013-07-17 05:42:38

标签: ajax json tabs

我有两个标签,必须使用烂番茄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>

0 个答案:

没有答案