Php 更改an的样式类<;img>;使用AJAX

Php 更改an的样式类<;img>;使用AJAX,php,javascript,html,ajax,Php,Javascript,Html,Ajax,我已经设法让AJAX工作,这样PHP就可以在点击图像时执行,但是,我希望这个结果能够在不重新加载页面的情况下实时直观地显示出来,所以我想更改我的“>的类,并且我想用PHP/AJAX对其进行更改 这可能吗?谢谢 编辑:多亏了您的回答,我已经修复了这一问题:document.getElementById(var1.className=“game”+var2; 但是,这只工作一次,因为PHP在页面上提供了var2,这仍然是一样的-有没有任何方法可以让它在第二次单击时恢复到原始/上一个类,从而无限工作

我已经设法让AJAX工作,这样PHP就可以在点击图像时执行,但是,我希望这个结果能够在不重新加载页面的情况下实时直观地显示出来,所以我想更改我的
“>
的类,并且我想用PHP/AJAX对其进行更改

这可能吗?谢谢

编辑:多亏了您的回答,我已经修复了这一问题:
document.getElementById(var1.className=“game”+var2;

但是,这只工作一次,因为PHP在页面上提供了var2,这仍然是一样的-有没有任何方法可以让它在第二次单击时恢复到原始/上一个类,从而无限工作


我在这里只是猜测,但是JS有没有办法获取当前类,或者使用某种“if”语句将其更改为相反的值?

您可以使用如下方法设置类:

$("#idname").attr('class', 'newClass');
$("#idname").addClass('newClass');
如果要添加类,请改为使用,如下所示:

$("#idname").attr('class', 'newClass');
$("#idname").addClass('newClass');
您还可以使用删除该类


您可以使用设置类,如下所示:

$("#idname").attr('class', 'newClass');
$("#idname").addClass('newClass');
如果要添加类,请改为使用,如下所示:

$("#idname").attr('class', 'newClass');
$("#idname").addClass('newClass');
您还可以使用删除该类


如果您的目的只是更改css类名,则不需要AJAX调用。您可以直接使用javascript或jquery(如果您使用jquery)

Javascript

要添加/更改元素的类,请执行以下操作:

document.getElementById("idMyElement").className = "MyCssClass";
document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );
要向元素添加其他类,请执行以下操作:

document.getElementById("idMyElement").className = "MyCssClass";
document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );
document.getElementById(“idMyElement”).className+=“MyCssClass”;
[注意:在MyCssClass之前添加了一个空格]

要从元素中删除类,请执行以下操作:

document.getElementById("idMyElement").className = "MyCssClass";
document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );
如果您想使用Jquery,请按照@Harshal Mahajan的建议使用


如果在AJAX调用后需要更改,可以在AJAX调用的响应中使用上述内容。

如果您的目的只是更改css类名,则不需要AJAX调用。您可以直接使用javascript或jquery(如果您使用jquery)

Javascript

要添加/更改元素的类,请执行以下操作:

document.getElementById("idMyElement").className = "MyCssClass";
document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );
要向元素添加其他类,请执行以下操作:

document.getElementById("idMyElement").className = "MyCssClass";
document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );
document.getElementById(“idMyElement”).className+=“MyCssClass”;
[注意:在MyCssClass之前添加了一个空格]

要从元素中删除类,请执行以下操作:

document.getElementById("idMyElement").className = "MyCssClass";
document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );
如果您想使用Jquery,请按照@Harshal Mahajan的建议使用



如果您需要在AJAX调用后进行更改,您可以在AJAX调用的响应中使用上述内容。

是的,在AJAX的成功方法中,以img为目标并更改类。PHP在服务器上运行,与客户端样式或事件无关。您根本不需要AJAX。PHP是服务器端脚本语言!!Simple javasc您正在寻找的是cript。请发布PHP的HTML输出。由于AJAX使用在浏览器中运行的JS,我们需要查看浏览器从服务器获得的内容。是的,在AJAX的成功方法中,以img为目标并更改类。PHP在服务器上运行,与客户端样式或事件无关。您不需要AJAXPHP是服务器端脚本语言!!简单的javascript就是你想要的。请发布PHP的HTML输出。由于AJAX使用在浏览器中运行的JS,我们需要查看浏览器从服务器上得到什么。Hi@Harshal Mahajan..Make JS fiddle..更有用user@VIVEK-MDU为什么需要JS小提琴?只需按
F12
访问开发人员工具,并在此页面上尝试代码。@VIVEK-MDU…没有问题。非常简单。我如何将其放入现有的JS中?我收到一个错误,说$不是函数。(我不太熟悉JS/AJAX)你需要在你的文件中包含js,除非你包含js.Hi@Harshal-Mahajan..Make js fiddleuser@VIVEK-MDU为什么需要JS提琴?只需按F12进入开发者工具,并在此页面上试用代码即可。@VIVEK-MDU…没有问题。太简单了请问我该如何把它放到我现有的JS中呢?我得到一个错误,说$不是一个函数。(我不太熟悉JS/AJAX)你需要在你的文件中包含js,直到你包含了js.Brilliant,它才被识别为jqery代码,就是这样做的。:)有没有任何方法可以让它在同一页面加载中再次单击时强制更改回上一个类?抱歉,可能应该澄清一下-当前单击时它知道根据n PHP在页面上提供的信息,因此在第一个类更改后信息保持不变。我认为我们可以使用条件检查并恢复到旧的css类,如果(document.getElementById(“idMyElement”).className==“MyCssClass”){document.getElementById(“idMyElement”).className=“oldMyCssClass”}太棒了,没错。:)如果在同一页面加载中再次单击,有没有办法强迫它更改回上一个类?对不起,应该澄清一下-当前单击时,它知道根据PHP在页面上提供的信息将其更改为相反的类,所以在第一个类更改后,信息保持不变。我认为我们如果(document.getElementById(“idMyElement”).className==“MyCssClass”){document.getElementById(“idMyElement”).className=“oldMyCssClass”;},可以使用条件检查并恢复到旧的css类