用class和var构造jQuery选择器

Question

我收到了这个ajax请求：

$.ajax({
    dataType: "jsonp",
    url: "http://api.rottentomatoes.com/api/public/v1.0/movies/" + filmID + ".json?apikey=[your_api_key],
    success: dataHandler,
    crossDomain: true
});

filmID这里有一个var，它根据单击的选项卡选择电影的id。那么我得到了这个函数dataHandler()。

function dataHandler (data) {
    $(".title").append(data.title);
};

现在的问题是，我单击哪个选项卡并不重要，只加载该选项卡的数据。如果我尝试点击其他选项卡，它不会起作用。我知道它与这个标题类有关，因为所有选项卡都有它。我需要以某种方式将它分离，也许可以向类中添加filmID，这样浏览器就知道应该加载哪些数据。但我有点迷失了如何做到这一点，并将一切放在一根绳子上？

Answer 1

我会这样做。

HTML标记：

<div class="tab" id="film1">...</div>
<div class="tab" id="film2">...</div>
<div class="tab" id="film3">...</div>

Js:

$('.tab').click(function(){
    var tab = $(this),
        filmID = tab.attr('id');
    var xhr = $.ajax ({
        dataType: "jsonp",
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies/" + filmID + ".json?apikey=[your_api_key]",
        crossDomain: true
    }); 
    xhr.done(function(data){
        tab.append(data.title);
    });
});