ajax 和 php 和 sql答案

【问题标题】：ajax and php and sqlajax 和 php 和 sql
【发布时间】：2018-10-03 08:25:48
【问题描述】：

我的页面上有一个来自数据库表的项目列表检查时我正在尝试更改字形图标

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

问题是当我点击一个项目时 - 所有项目都改变了字形

我做错了什么？

【问题讨论】：

因为你的 jquery 选择器，你应该选择 id 元素。
@lighter 他的选择器是对的。
$(this).load("clicked.php");：将更改的范围限制在点击的元素上。
将 $(".div1").load("clicked.php"); 替换为 $(this).load("clicked.php"); 并让我们知道它是否有效。
您不需要从服务器加载新的 HTML 来执行此操作，您只需更改跨度 class 以删除 glyphicon-eye-open 并将其替换为 glyphicon-ok

标签： php sql ajax

【解决方案1】：

您只需要删除并添加新类：

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

    });
});

【讨论】：

【解决方案2】：

当您所做的只是删除一个类并向一个跨度添加一个新类时，无需一直到服务器获取一个新的跨度。

同样使用正确的范围，$(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>

【讨论】：