Question

我有这个代码，如果可能的话，我想修改它来回显图像而不是“是/不可用”文本。我也想摆脱按钮并使用onkeyup或其附近的东西，以便用户有实时通知。有人可以帮助我做出这些改变吗？

  $(document).ready(function() {
      $("#btnUsername").click(function() {
          var name = $("#txtUsername").val();
          var status = $("#divStatus");
          status.html("Checking....").removeClass();
          $.post("1.php", { username: name },
          function(data) {
              if (data == "true") {
                  status.html(name + " Is Available!").addClass("green");
              } else {
                  status.html(name + " Is Not Available!").addClass("red");
              }
          });
      });
  });

Answer 1

...
status.html(name + "<img src='unavailable.png' />").addClass("red");
...

Answer 2

你可以让你的1.php返回JSON，然后将它放在你的回调方法的数据对象中。其中一个JSON属性可能是您可以添加到屏幕的图像的URL /路径..您的回调可能类似于：

function(data) {
    if (data) {
        status.html($("<img/>").attr("src", data.image_path));
    } else {
        status.html(name + " Is Not Available!").addClass("red");
    }
});

我不确定你的1.php在做什么，所以我不确定这是否可行，但这就是我要这样做的方法..

修改除非你想要显示一个图像（比如它的图像总是相同的“成功/失败”），你可以只包括路径而不是让你的1.php返回它。

至于改变点击仅仅是改变

$("#btnUsername").click(function() {

到

$("#btnUsername").keyup(function() {

如何使用jquery回显图像

2 个答案: