ajax и php и sql

Question

У меня есть список элементов на моей странице из таблицы БД. Я пытаюсь изменить глификон при проверке

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

это скрипт в верхней части моей страницы:

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

clicked.php выглядит следующим образом:

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

Проблема в том, что когда я нажимаю на один элемент - все элементы меняются там, глифы

Что я делаю не так?

Answer 1

Нет необходимости проходить весь путь до сервера, чтобы получить новый диапазон, когда все, что вы делаете, это удаление класса и добавление нового класса в диапазон.

Также используя правильную область действия,$(this) остановит действие всех ваших div1 элементов.

<script>
$(document).ready(function(){
    $(".div1").click(function(){
        //$(".div1").load("clicked.php");
        $(this).children('span').removeClass('glyphicon-eye-open');
        $(this).children('span').addClass('glyphicon-ok');
    });
});
</script>

И заставит код переключаться с одного на другой при каждом нажатии

<script>
    $(document).ready(function(){
        $(".div1").click(function(){
            if ( $(this).children('span').hasClass('glyphicon-ok') ) {
                $(this).children('span').removeClass('glyphicon-ok');
                $(this).children('span').addClass('glyphicon-eye-open');
            } else {
                $(this).children('span').removeClass('glyphicon-eye-open');
                $(this).children('span').addClass('glyphicon-ok');
            }
        });
    });
    </script>

Answer 2

Вы просто должны удалить и добавить новый класс:

$(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

    });
});