Question

我正在尝试通过双击并在评论字段中输入注释来“复制”照片的功能来复制Instagram。我有以下功能：

$(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 以下是检索示例Feed的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>

Answer 1

您的代码无效，因为其中存在很多错误。

在.image元素的点击处理程序中，您不应该将this关键字包装在单引号中。
在textarea的keyup处理程序中，您忘记为#添加instagram-wrap，以便按ID选择元素。

无论如何，这就是我的工作方式（jsfiddle：here）。如果我们说您想要双击功能，请使用dblclick事件代替click。

此外，每次在文本框中按下.comments时，您都会在另一个.comments元素中附加Enter元素。这将导致所有注释相互嵌套。我想你只想让.comments元素成为包装器，每个注释只是.comment。

PS：我不知道您的HTML结构，所以我只是假设它基于您的JavaScript。

jquery dblclick（）和keyup（）函数不...正常运行

1 个答案: