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');
}

タイトル、ビュー、URL を含む div で結果を取得します。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 とタイトルを指定する必要があります
リストをフィドルでクリックしても何も実行されません (理由はわかりませんが、私のシステムでは動作します)

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 から item-remplate を削除してみてください。おそらく、クリックバインディングを修正する必要があります。このフィドルでテストしたところ、うまくいくようです。そうでない場合は、コードに小さな変更を加えて修正しようとしました。

提案、jquery テンプレートを確認してください

于 2012-06-24T23:12:16.847 に答える