私はインスタントグラムのクローンをダブルクリックしてコメント欄にコメントを入力することで、写真を「好き」する機能を作ろうとしています。私は 次の機能があります。ここでは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>
また、HTML構造も投稿する必要がありますので、バグを見つけやすくなります。今では、私が考えることができるのは、最初のコードの2行目の「this」が引用符で囲まれていないことだけです。 –
コンソールエラー? – uzaif
あなたは* .click()を使用しました。* single *クリックハンドラをバインドします。あなたが '.closest()'に渡すセレクタは、あるケースでは#を持ち、もう一方のケースでは#を持っていないので、おそらく2番目のセレクタは間違っています。 htmlに要素IDを重複させるべきではありません。 – nnnnnn