1

我有两个选项卡，它们必须使用烂番茄 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功能 only #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>
4

0 回答 0