找到元素的id

时间:2012-02-11 19:50:14

标签: php jquery html

我有这个html。 (链接在底部)

它输出的PHP代码用于状态更新,它有视图注释和发表评论链接,帖子评论链接使用jquery添加textarea并在状态更新下面提交按钮。并且视图注释显示该状态更新下面的状态更新的注释。

所以我使用php循环所以在大多数时候显然会有超过1个状态更新(取决于用户有多少朋友)所以我不能拥有像'textelement'这样的元素,我需要像'textelement1这样的元素'和'textelement2' 所以我使用php在_id等链接的末尾添加状态更新的id,因此元素id变为view_comments_1。

所以我想使用jquery找出已点击的元素,这样我就可以添加一个文本框并在正确的状态更新下显示注释,而不是在所有状态更新下面显示它。

HTML

<div class="wrapbg">

    <span class="corners-top"><span></span></span>
    <div id="content"><br/>
        Whats new?
        <hr class='hr1'>

        <div class='stbody' id='stbody'>

            <div class='stimg'>
                <img src='uploads/profile_pics_small/Anonymous_Blueprint_Wallpaper_by_co.jpg' /></img>
            </div>
            <div class='sttext'>
                Welcome yoall!!
                <div class='sttime'>By LUcase</div>
                <br><br>

                <a href=''>0 Likes</a> <a href=''>1 Dislikes</a>
            </div>
            <a href=''>unDislike</a> <a id='comment_now_1' href=''>Comment</a> <a id='view_comments1' data-id-1 = '1' href=''>View comments</a> <div id='emptydiv1'> </div></div>
        <div class='stbody' id='stbody'>

            <div class='stimg'>

                <img src='uploads/profile_pics_small/wood_texture_by_pabloalvin-d1igijr.jpg' /></img>
            </div>
            <div class='sttext'>
                hi
                <div class='sttime'>By nicknick</div>
                <br><br>
                <a href=''>0 Likes</a> <a href=''>0 Dislikes</a>
            </div>
            <a href=''>Like</a> <a href=''>DisLike</a> <a id='comment_now_4' href=''>Comment</a> <a id='view_comments4' data-id-4 = '4' href=''>View comments</a> <div id='emptydiv4'> </div></div></div>

    <span class="corners-bottom"><span></span></span>
</div>

的JavaScript

    //Gotta find out which status update we are dealing with!
    jQuery("document").ready(function(){
        jQuery(".likebtn").click(function(e) {
            var id=jQuery(this).attr("data-id");
            jQuery.post('like.php', {'id': id}, function(data) {
                alert("Your like.php has been called");
            }, "json");
            e.preventDefault();
        });
        jQuery(".dislikebtn").click(function(e) {
        });

//gotta figure out which status update we are dealing with!
//attache the click event to the anchor tag
        $("#comment_now").live("click",function(e){
            //prevent the default behaviour of following the link
            e.preventDefault();
            $("#comment_now").remove();
            //find the textarea element, and after it, put an input tag
            $(".sttext").after('<textarea id="comment_text" name="comment"></textarea> <br> <button id = "post_button" class="action greenbtn"><span class="label">Comment</span></button> <a id="cancel_comment" href="">Cancel</a> <br id="com_spacing">');
        });



//gotta figure out which status update we are dealing with!
        $("#cancel_comment").live("click",function(event){
            event.preventDefault();
            $("#comment_text").remove();
            $("#cancel_comment").remove();
            $("#post_button").remove();
            $("#com_spacing").remove();
            $("#view_comments").before('<a href="" id="comment_now">Comment</a> ');
        });

        $("#view_comments").live("click", function(e){
            e.preventDefault();
            var id=jQuery(this).attr("data-id");
            $.ajax({

                url: 'query_comments.php?status_id='+id,
                beforeSend: function( xhr ) {
                    xhr.overrideMimeType( 'text/plain; charset=UTF-8' );
                },
                success: function( data ) {
                    $('#emptydiv').html(data);
                }
            });
        });
    });

请帮帮我:)。

2 个答案:

答案 0 :(得分:4)

你知道html表单可以发送数组,对吗?

<input type="text" name="textelement[]" value="First Element" /><br/>
<input type="text" name="textelement[]" value="Second Element" /><br/>

PHP代码:

foreach($_POST['textelement'] as $somethingSomething){
    echo $somethingSomething, "\n";
}

打印出来:

 First Element
 Second Element

答案 1 :(得分:0)

将一个类添加到操作按钮,并将注释ID作为data属性传递,如下所示:

<a class="commentBtn" href='' data-commentid="1">Comment</a>

并且你可以使用jquery轻松读出id:

$(".commentBtn").live("click",function(e){ var id = $(this).data('commentid'); e.preventDefault(); // do something with id… });