1

重複の可能性：
jQuery-複数の$（document）.ready（function（）{}）;があるのは悪いことです。
複数の$（document）.ready（function（）セクションを持つことができますか？

これが私の唯一のプロジェクトのjQueryファイルです 

// loading search page
$(function(){
  $("#search").click(function() {
    $("#feature").load("templates/search.html", function() {
        $("#search-input").focus();
        $("#search-input").css({
            "margin-left": "20%",
            "margin-top" : "2%"
        });
    });
 });
});

/* 
finding youtube videos
API source : https://developers.google.com/youtube/2.0/developers_guide_jsonc
*/
$(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'],
                    }
                    item = video_result_template(search_data);
                    $('#result').append(item).fadeIn('slow');
                });
            } else {

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

// playing the video from search result on player pane
$(function(){
    $('.item').live('click', function(){
        // alert(this.id);
        var url = $('#video-frame').attr('src');
        var new_url = url.replace(/embed\/[\w -]*/g, 'embed/' + this.id);
        $('#video-frame').attr('src', new_url);
    });
});

// creating new playlist
$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(e){
            var title = $(e.target).closest('.video-detail').find('.title').text();
            alert(title);
        });
    });

    // $('form .create-playlist-button').live('click', function(e){
    //  var title = $(e.target).closest('.video-detail').find('.title').text();
    //  alert('title');
    // });
        // $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(){
        //          alert($('.title').get(1).textContent);
        //      });

});

// animating slideshow on landing page
$(function(){
    $('#slides').slides({
        preload: true,
        pagination: true,
        preloadImage: '../static/img/loading.gif',
        play: 2000,
        pause: 1000,
        hoverPause: true
    });

    $('.slides_control').css({
        "height": "600px",
        "margin-right": "400px"
    });

    $('.pagination').hide('');
});

質問

  • このjqueryページには複数の$（関数）（DOMの準備ができていることを意味します）関数がありますが、それは正しくありませんか？とすれば
  • 一部のjQuery関数は異なるページに適用されます
  • 一部の要素はページの後半に表示されます（load（）関数を参照）

それはどのように機能しますか？よくわかりませんが、ここに何か問題があるようです。つまり、定期的にやっている人から学ぶチャンスは絶対にあるということです。

PS-私はjQueryの世界にまったく慣れていません。私は最初のプロジェクトに取り組もうとしています。

4

2 に答える 2

1

はい、エラーなしでこのように使用できますが、コードをさらに作成するために、タグを不必要に繰り返さないneatでください。readable

注： 1つの関数で宣言された変数は、他の関数ではアクセスできないため、関数本体を繰り返す場合は変数のスコープに注意する必要があります。

お役に立てれば。

于 2012-07-10T14:26:02.377 に答える
1

使用するときは$(function() {..});、実際に次のことを行います。$(document).ready(function() {..});これは、ドキュメントのreadyイベントに関数を登録することです。
あなたがしたことは、有効で正しいシングルクリックイベントにいくつかの関数を登録するようなものです。

私がはっきりしていることを願っています。

于 2012-07-10T14:21:40.387 に答える