2016-06-20 29 views
0

私はインスタントグラムのクローンをダブルクリックしてコメント欄にコメントを入力することで、写真を「好き」する機能を作ろうとしています。私は 次の機能があります。ここではjquery dblclick()とkeyup()関数が機能していません

$(document).ready(function() { 
    var url = 'https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json'; 
    loadInstagram(url); 
    $('.image').on('dblclick', function(){ 
     $(this).closest("#instagram-wrap").find(".like").append("mickyshaked "); 
    }); 
    $('textarea').on('keyup', function(event) { 
     if((event.keyCode || event.which) == 13){ 
      event.preventDefault(); 
     $(this).closest("#instagram-wrap").find(".comments").append('<div class="comment">'+$(this).val()+'</div>'); 
     $(this).val("Add a comment..."); 
     } 
    }); 
}); 

EDIT は、サンプルのフィードを取得するget要求である:ここで

function loadInstagram(url){ 
    $(function() { 
     $.ajax({ 
      type: 'GET', 
      dataType: 'json', 
      cache: false, 
      url: url, 
      success: function(data) { 
       console.log('data.length: ',data.length); 
       console.log('data[0]: ', data[0]) 
       count = data.length; 
       var likeCount = {}; 
       for(var i = 0; i < count; i++) { 
        var photoURL = (data[i]); 
        likeCount[photoURL] = 0; 
        console.log(photoURL); 
        $('#instagram').append('<div class="instagram-wrap"><img class="image" src="'+photoURL+'"/><div class="likeWrap"><span class="likesIcon">♥</span><span class="likeNames"></span></div><div class="comments">Comments section</div><textarea class="commentarea" placeholder="Add a comment..."></textarea></div>'); 
       } 
      } 
     }) 
    }) 
}; 

はあなたのコードが動作していないHTML

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Instagram Feed</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
    <script type='text/javascript' src='feed.js'></script> 
    <link rel="stylesheet" type="text/css" href="feedstyle.css"> 
</head> 
<body> 
<div id='container'> 
    <div id="header"> 
     <img id="homeicon" src="homeicon.png"/> 
     <span id='logo'>Instagram</span> 
     <img id="userimage" src="http://www.thegrindradio.co.za/wp-content/uploads/2013/07/instagram-camera-logo-50x50.png"/> 
     <span id="username">mickyshaked</span> 
    </div> 
    <div class='body'> 
     <div id="instagram"></div> 
    </div> 
</div> 
</body> 
</html> 
+1

また、HTML構造も投稿する必要がありますので、バグを見つけやすくなります。今では、私が考えることができるのは、最初のコードの2行目の「this」が引用符で囲まれていないことだけです。 –

+0

コンソールエラー? – uzaif

+0

あなたは* .click()を使用しました。* single *クリックハンドラをバインドします。あなたが '.closest()'に渡すセレクタは、あるケースでは#を持ち、もう一方のケースでは#を持っていないので、おそらく2番目のセレクタは間違っています。 htmlに要素IDを重複させるべきではありません。 – nnnnnn

答えて

0

ですそれには多くの間違いがあるからです。 .image要素のためのあなたのクリックハンドラ内

  1. ときあなたはいけない、あなたは、単一引用符でthisキーワードを包みました。
  2. テキストエリア用のキーアップハンドラ内に#instagram-wrapに追加するのを忘れて、そのIDで要素を選択するようにしました。

とにかく、私はその仕事をしました(jsfiddle:here)。ダブルクリック機能が必要な場合は、clickの代わりにdblclickイベントを使用してください。

また、Enterがテキストボックスで押されるたびに、.comments要素が別の.comments要素内に追加されます。これにより、すべてのコメントが互いにネストされます。 .comments要素をラッパーにして、各コメントをちょうど.commentにしたいと思う。

PS:私はあなたのHTML構造を知らないので、私はあなたのjavascriptに基づいています。

+0

これは準備機能の中に入る必要がありますか? –

+0

ええ、準備機能の中に置きます。 –

+0

私は何を持っているかを示すために編集するつもりです。何も影響を及ぼさないようで、私は昇華で定義されていないrefエラーが発生しています –

関連する問題