Question

我有一张图片，当我点击它时，我希望它更改为另一张图片并更改其ID。然后，当我点击这个新图像时，它会恢复原状。

$(document).ready(function(){
    $("#name_edit").click(function(){
        $(this).attr("src", "img/tick.png");
        $(this).attr("id","name_confirm");
    });
    $("#name_confirm").click(function(){
        $(this).attr("src", "img/edit.png");
        $(this).attr("id","name_edit");
    });
});

我已成功完成第一步，从#name_edit转到#name_confirm。但事实并非相反。

我该如何解决这个问题？

我怀疑是因为我正在使用（document）.ready，jQuery正在为页面上已有的元素做准备。但是，在单击图像之前，ID name_confirm的元素不存在。

感谢。

Answer 1

您正在处理的元素总是相同的......

＆＃13;

$(document).ready(function(){

    // use just the first id value to find it in the DOM
    $("#name_edit").click(function(){
      var item = $(this);
      var id = item.attr('id');
      
      if(id === 'name_edit') {
        return item
          .attr("src", "img/tick.png")
          .attr("id","name_confirm")
        ;
      }
    
      
      return item
        .attr("src", "img/edit.png")
        .attr("id","name_edit")
      ;
    })
    ;
});

＆＃13;

Answer 2

我认为你为你的问题选择了糟糕的解决方案。 1）为什么你的代码不起作用：只加载2个事件，即加载文档。因此，jquery在其上找到#name_edit元素并绑定onclick事件。但是jquery找不到#name_confirm元素，因为它在文档准备就绪时不存在）在你的代码中你应该绑定1个onclick事件，但是有一些attr（例如用于检查你的状态的类）。类似的东西：

 <img id="main_image" class="name_edit"/>
 <script>
 var img_paths = ["img/tick.png", "img/edit.png"]
 var img_index = 0;
 $("#main_image").click(function(){
    if($(this).attr("class") == "name_edit"){
       $(this).attr("src", "img/tick.png");
       $(this).attr("class","name_confirm"); 
    }
    else{   
       $(this).attr("src", "img/edit.png");
       $(this).attr("class","name_edit");
    }
 });
 </script>

其他解决方案：您可以创建2个图像并显示/隐藏它们。或者使用带有背景attr的样式。使用伪类或类。您还可以在点击时将图像路径存储在数组和刻度数组索引中。

类似的东西：

 var img_paths = ["/content/img1.png", "/content/img2.png"]
 var img_index = 0;
 $("#main_image").click(function(){
    $(this).src = img_paths[img_index];
    img_index = !img_index;
 })

Answer 3

我可以确认其他人说的是什么... jquery在文档准备好后运行，但随后不会更新 - 所以它基本上从dom获取正确的元素，并分配click事件。它没有name_confirm的事件。

所以这段代码什么也没做......

$("#name_confirm").click(function(){
    $(this).attr("src", "img/edit.png");
    $(this).attr("id","name_edit");
});

See it not work in this instructive jsfiddle

当然id需要改变吗？是否可以使用例如img的特定类？然后你可以在类上进行第二次单击绑定...例如，参见this working example，它仍会更改src和id ...

Answer 4

试穿方法：

$(document).on('click', '#name_edit', function(){
    $(this).attr("src", "img/tick.png");
    $(this).attr("id","name_confirm");
});
$(document).on('click', '#name_confirm', function(){
    $(this).attr("src", "img/edit.png");
    $(this).attr("id","name_edit");
});

jQuery没有为具有新id的新元素执行代码

4 个答案: