Ajax和PHP和SQL

Question

I have a list of items on my page from a DB table I am trying to change the glyphicon when checked

<div  class="div1">
<span  id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>

this is the script on the top of my page:

<script>
$(document).ready(function(){
    $(".div1").click(function(){
        $(".div1").load("clicked.php");
    });
});
</script>

clicked.php looks like:

<span  id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>

The problom is the when I click on one item - all the items change there glyphicons

What am I doing wrong?

Answer 1

You just have to remove & add new class:

$(document).ready(function(){
    $(".div1").click(function(){
        $(this).children('span').removeClass('glyphicon-eye-open');
        $(this).children('span').addClass('glyphicon-ok');

        //Here you can add ajax call

    });
});