0

我有一个搜索页面 

<div class="">
    <input id="search-input" type="text" class="input-medium search-query span4">
</div>

<div id="result">

</div>

<div id="result-template">
    <div class="hide-item item" id="item">
        <div style="float:left">
            <img class="thumbnail" src="" alt="" />
        </div>
        <div id="name">
            <p class="title"></p>
            <p class="views"></p>
        </div>
    </div>
</div>

和 jQuery 作为 

$(function(){
    $('#search-input').live('keyup',function() {
        var search_input = $(this).val();
        var keyword = encodeURIComponent(search_input);
        var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=10&v=2&alt=jsonc';

        $.ajax({
          url: yt_url,
          type: 'GET',
          dataType: 'jsonp',
          complete: function(xhr, textStatus) {
            //called when complete
          },
          success: function(response, textStatus, xhr) {
            if(response.data.items) {
                var template = $('#item').clone();
                $('#result').html(template);
                $.each(response.data.items, function(i, data) {
                    console.log(data)
                    search_data = {
                        'id': data.id,
                        'title': data.title,
                        'views': data.viewCount,
                        'thumbnail': data.thumbnail['sqDefault'],
                    }
                    video_result_template(search_data);
                });
            } else {
                // var template = $('#item').clone();
                // $('#result').html(template);
            }
          },
          error: function(xhr, textStatus, errorThrown) {
            //called when there is an error
          }
        });
    });
});

// filling out the search template
function video_result_template(data) {
    var item = $('#item').clone();
    item.removeClass('hide-item');
    item.find('img').attr('src', data.thumbnail);
    item.find('.title').html(data.title);
    item.find('.views').html(data.views);
    $('#item').attr('id', data.id);
    item.addClass('view-item');
    // $('#result').append(item).fadeIn(); // slow/fast?
    $('#result').append(item).fadeIn('slow');
}

我在 div 上得到标题、视图、url 的结果。现在，当我单击 div 时，会触发以下 jQuery 

$(function(){
    $('.item').live('click', function(){
        // alert(this.id);
        console.log($(this));
        var url = $('#video-frame').attr('src');
        var new_url = url.replace(/embed\/[\w -]*/g, 'embed/' + this.id);
        alert($('.title').html() + ',' + new_url);
        $('#video-frame').attr('src', new_url);
    });
});

这会提醒正确的标题，但 url（或 video_id 是列表中的下一个视频）。

当我从 Firefox 看到我的 html 时，我看到以下内容

 <div id="result" style="display: block;">
    <div id="lqT_dPApj9U" class="item view-item">
      <div style="float: left;"><img alt="" src=
      "http://i.ytimg.com/vi/S2nBBMbjS8w/default.jpg" class="thumbnail" /></div>

      <div id="name">
        <p class="title">Coke 2012 Commercial: "Catch" starring NE_Bear</p>

        <p class="views">619167</p>
      </div>
    </div>

    <div id="hKoB0MHVBvM" class="item view-item">
      <div style="float: left;"><img alt="" src=
      "http://i.ytimg.com/vi/lqT_dPApj9U/default.jpg" class="thumbnail" /></div>

      <div id="name">
        <p class="title">Coca-Cola Happiness Machine</p>

        <p class="views">4791156</p>
      </div>
    </div>

    <div id="item" class="item view-item">
      <div style="float: left;"><img alt="" src=
      "http://i.ytimg.com/vi/S2nBBMbjS8w/default.jpg" class="thumbnail" /></div>

      <div id="name">
        <p class="title">Coke 2012 Commercial: "Catch" starring NE_Bear</p>

        <p class="views">619167</p>
      </div>
    </div>
  </div>
  • 如果看得清楚，第一个和最后一个 div 具有相同的数据元素
  • 事实上不同之处在于最后一个 div 是第一个元素的副本
  • 最后一个元素的 id="item" 无效（必须是视频 id）

问题 我该如何解决这个问题？

JSFiddle http://jsfiddle.net/hhimanshu/F5NHK/

必需 搜索后，单击任何视频 div，它必须提供正确的视频 ID 和标题
PS 在小提琴中单击列表没有做任何事情（不知道为什么，但它在我的系统上工作）

4

2 回答 2

0

在功能 

// filling out the search template
function video_result_template(data) {
    var item = $('#item').clone();
    item.removeClass('hide-item');
    item.find('img').attr('src', data.thumbnail);
    item.find('.title').html(data.title);
    item.find('.views').html(data.views);
    $('#item').attr('id', data.id);
    item.addClass('view-item');
    // $('#result').append(item).fadeIn(); // slow/fast?
    $('#result').append(item).fadeIn('slow');
}

替换$('#item').attr('id', data.id);为item.attr('id', data.id);

感谢@arhen 提供此解决方案

于 2012-06-24T23:08:45.363 回答
0

尝试从#results div 中删除您的项目模板。也许您将不得不修复点击绑定。我在这个小提琴中进行了测试，似乎可以工作。告诉它是否没有，我试图修复它，对您的代码进行微小的更改。

建议，检查jquery模板

于 2012-06-24T23:12:16.847 回答