Question

所以我试图复制Facebook的图片标记功能，我有onClick的功能，创建了一个框，并且有一个评论框。

现在的问题是，我希望能够（不进行任何后端处理）从输入字段中获取输入，并以某种形式将其添加到他们选择的基础图像区域。我还想在该区域添加一个小图像，表明有评论。

我该怎么做？

请参阅下面的代码，了解我对评论框的看法：

<script type="text/javascript">

    $(function() {
            var tag_box = $("<div>").appendTo("body").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "display":"none", 
                "padding":"15px"
                });

        var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});            

        $("#image-wrapper").live('click', function(e){
            tag_box.css({
                "left": e.pageX - 40,
                "top": e.pageY - 40, 
                "display": "block"
                })
            .after(comment_box.css({
                "left": e.pageX - 65,
                "top": e.pageY + 40
            }));

            });

        });


</script>
<body>    
<div align="center">  

    <img src="images/test.gif" width="760" height="182" alt="test" id="image-wrapper">

    </div>
</body>

现在......每当用户按下回车键时，注释框中的信息就会附加到URL，如下所示：

.html？评论=评论价值＃

由于

编辑：我的错...我遗漏了HTML ...我已将其附加到上面的脚本标记。

Answer 1

这可能不是最佳解决方案，但请尝试一下：）

<script type="text/javascript">
    $(function() {

        var tag_box = $("<div class=\"comment-box\"></div>").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "padding":"15px"
        });

        var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});            

        $("#image-wrapper").live('click', function(e){
            if($(this).parent().find('.comment-box').length === 0) {
                $(this).parent().append(tag_box).css('top',182).find('input#comment').focus();
            }
            return false;
        });
        $(".comment-box").
            live('mouseenter mouseleave', function(event) {
                if(event.type == 'mouseout') {
                    $(this).remove();
                }
            })
            .find('form').live('submit',function() {
                var comment = $(this).find('input#comment').val();
                var wrapperOffset = $("#image-wrapper").offset();
                var commentBlock = '<div class="comment-block" style="position:absolute;color:white; display:block; float:left; clear:both; height:auto; width:760px; background:red;">' + comment + '</div>';
                var posTop = wrapperOffset.top;
                $(commentBlock).css({
                    'width' : 760,
                    'top' : posTop,
                    'left' : wrapperOffset.left,
                    'z-Index' : 100
                });

                if($("#image-wrapper").parent().find('.comment-block').length > 0) {
                    var lastBlock = $("#image-wrapper").parent().find('.comment-block:last');
                    var lastBlockOffset = $(lastBlock).offset();
                    $(commentBlock).insertAfter($(lastBlock)).css('top', lastBlockOffset.top + $(lastBlock).height() + 4);
                } else {
                    $(commentBlock).insertBefore('#image-wrapper');
                }

                $(this).parent().parent().find('.comment-box').remove();
                $(this).get(0).reset();
                return false;
            });
    });
</script>
<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>
</body>

更新：

<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>

如何使用jQuery为图像添加注释

1 个答案: