跟随和不跟随在循环代码中不工作

Question

我有单页的用户列表，

在这里，我想在同一个页面中使用“跟随”和“取消跟随”。

如果我给它跟随，只需更改div颜色并存储到数据库中。

在我的编码中为第一用户工作，但它不适用于第二，第三，...etc用户。

这是我的视图代码

<div class="gird12" id="followsuccess">
                <div class="team-mbr1">
                <?php foreach($userList as $user) { ?>
                    <div class="t-11" id="<?php echo $user->id; ?>">
                    <a href="<?php echo base_url($user->pagename); ?>" >
                        <div class="t-11-img">
                            <?php if($user->image != ''){ echo '<img src="'.$user->image.'" />'; }  ?>
                            <?php if($user->image == ''){ echo '<img src='.base_url('images/sample5.jpg').' />'; }  ?>
                        </div>
                    </a>
                        <input type="hidden" name="id" id="id" value="<?php echo $user->id; ?>" />
                        <?php
                        if($login_status == 1)
                        {
                        $followers = $this->db->where(array('user_id' => $userId , 'follower_id' => $user->id, 'follow_status' => 1))->get('sr_follow')->result();

                        if(count($followers) != ''){   ?>
                        <a id="userunfollow">
                        <div class="btn-11">
                            <button class="button button2" id="userunfollow">Following <?php echo $user->firstname; ?></button>
                        </div>
                        </a>
                        <?php } ?>


                        <?php if(count($followers) == ''){   ?>
                        <a id="userfollow">
                        <div class="btn-11">
                            <button class="button button1" id="userfollow">Follow <?php echo $user->firstname; ?></button>
                        </div>
                        </a>
                        <?php }  }  ?>
                     </div>
                  <?php }  ?>
                </div>
             </div>

我的Ajax

    // ****** ****** Follow ****** ****** //
$("#userfollow").click(function(){
            var id = $('#id').val();  
            var url = $('#url').val();  
            var Data= 'id='+id;

        $.ajax({
            type: "POST",
            url: url+"pages/userList/followinguser",
            data: Data, 
            cache: false,
            success: function(result){
            // This replace the retrieved data to the div after the setTimeOut function
            $('div#followsuccess').html(result);
            }
        });

});

// ***** ***** UnFollow ****** ****** //
$("#userunfollow").click(function(){
        var id = $('#id').val();  
        var url = $('#url').val();  
        var Data= 'id='+id;

    $.ajax({
        type: "POST",
        url: url+"pages/userList/unfollowinguser",
        data: Data, 
        cache: false,
        success: function(result){
        // This replace the retrieved data to the div after the setTimeOut function
        $('div#followsuccess').html(result);
        }
    });
});

Answer 1

将id改为onclick函数

Ajax代码

// ****** ****** Follow in list of creators page ****** ****** //
function userfollow(id,url)
{
    alert(id);
    alert("follow");
    var Data= 'id='+id;
    $.ajax({
        type: "POST",
        url:  url+"pages/userList/followinguser",
        data: Data, 
        cache: false,
        success: function(result){
            // This replace the retrieved data to the div after the setTimeOut function
            $('div#followsuccess').html(result);
        }
    }); 
}
// ****** ****** Follow in list of creators page ****** ****** //

// ****** ****** UNFollow in list of creators page ****** ****** //
function userunfollow(id,url)
{
    alert(id);
    alert("unfollow");
    var Data= 'id='+id; 
    $.ajax({
        type: "POST",
        url: url+"pages/userList/unfollowinguser",
        data: Data, 
        cache: false,
        success: function(result){
            // This replace the retrieved data to the div after the setTimeOut function
            $('div#followsuccess').html(result);
        }
    }); 
 }
// ****** ****** UNFollow in list of creators page ****** ****** //