Ajax, php и sql
У меня есть список элементов на моей странице из таблицы БД Я пытаюсь изменить глификон, когда установлен флажок
<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>
Проблема заключается в том, что когда я нажимаю на один элемент - все элементы меняют глификоны
Что я делаю неправильно?
@lighter Его селектор прав.
$(this).load("clicked.php");: ограничьте объем вашего изменения элементом, по которому щелкнули мышью.
Замените $(".div1").load("clicked.php"); на $(this).load("clicked.php"); и сообщите нам, работает ли он.
Для этого вам не нужно загружать новый фрагмент HTML с сервера, все, что вам нужно сделать, это изменить промежутки class, чтобы удалить glyphicon-eye-open и заменить его на glyphicon-ok.
@PraveenKumarPurushothaman & jeroen Это сработало как по волшебству !!!!! Спасибо!!!!!
@Amit Я добавил это как ответ. Не стесняйтесь принять его, нажав на кнопку с галочкой через 3 минуты.
Спасибо, как я могу сделать следующий щелчок обратным к первому классу?
Ответы 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
});
});
Нет необходимости полностью идти к серверу, чтобы получить новый диапазон, когда все, что вы делаете, - это удаление класса и добавление нового класса в диапазон.
Также при использовании правильного прицела $(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>
Поскольку вы селектор jquery, вы должны выбрать элемент id.