Question

我设法让AJAX正常运行，以便在点击图像时执行PHP，但是，我希望这个结果能够实时直观地显示，而不需要重新加载页面，所以我想改变我的类点击<img>个标签。

我的图片代码目前类似于<img title="<?=$game['name']?>" class="game_<?=$complete?>" src="<?=$gameimgurl?>">，我想在PHP / AJAX上点击它。

这可能吗？谢谢！：d

编辑：由于你在这一行的回答，我已经修好了它：document.getElementById(var1).className = "game_"+var2;

然而，这仅适用于页面上的PHP提供的var2，这仍然是相同的 - 有没有什么方法可以让它在第二次点击时恢复到原始/上一课，这样它无限运行？

我只是在这里猜测，但JS是否有任何方法可以获得当前的类，并且可能有某种“if”语句将其更改为相反的方式？

Answer 1

您可以使用.attr()设置课程，如下所示：

$("#idname").attr('class', 'newClass');

如果您想添加课程，请改用.addclass()，如下所示：

$("#idname").addClass('newClass');

您也可以使用.removeClass()

删除课程

$("#idname").removeClass('newClass');

Answer 2

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

<强>的Javascript

添加/更改元素的类：

document.getElementById("idMyElement").className = "MyCssClass";

向元素添加其他类：

document.getElementById("idMyElement").className += " MyCssClass"; [注意：在MyCssClass之前添加一个空格]

从元素中删除类：

document.getElementById("idMyElement").className =  document.getElementById("idMyElement").className.replace
      ( /(?:^|\s)MyCssClass(?!\S)/g , '' );

如果你想按照@Harshal Mahajan的建议使用Jquery

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

使用AJAX更改<img/>的样式类

2 个答案: