javascript - 用jQuery切换onclick

我的代码有麻烦，但我仍然不确定如何解决我的问题。我什至不知道问题是什么。抱歉，如果让您感到困惑，我是Jquery的新手，英语不太流利。

问题：
我有这个HTML：

<div id="plot_info">
  <ul>
        <li>Coordinates: <span id="coordinates">(e,e)</span></li>
        <li>Building: <span id="building">castle</span></li>
        <li>Terrain: <span id="terrain">soft</span></li>
        <li>Temperature: <span id="temperature">warm</span></li>
        <li>Humidity: <span id="humidity">normal</span></li>
        <li>Population: <span id="population">1000</span></li>
        <li>Money: <span id="money">$1000000</span></li>
        <li>Goods produced: <span id="goods_produced">none</span></li>
        <li>Corruption level: <span id="corruption_level">.33%<span></li>
        <li>Owned by: <span id="owned_by">user</span></li>
    </ul>
    <input id="change_plot_info" type="button" value="Change">
    <input id="set_plot_info" type="button" value="Set" disabled>
</div>

我有这个js：

$("#change_plot_info").click(function() {
        alert("Get ready to enter 'EDIT MODE'");
        $("#plot_info span").click(function() {
            var span_id = this.id;
            var span_text = $(this).text();
            $(this).replaceWith("<input type='text' value='" + span_text + "' id='" + span_id + "'>");
            $("#change_plot_info").attr;
        });
    });

我想要这样，当我按下“更改”时，禁用了相同的按钮，并且启用了“设置”按钮。这样，当我按“设置”时，<input>会转换回一个跨度。但我希望这样做，因此可以在两者之间切换。

如前所述，我是JQuery的新手，所以请耐心等待。还要记住，我正在寻找最简单，最接近我的代码的地方，我不是在尝试只键入更少的内容。

一如既往地，对您所做的任何解释都深深地受到赞赏。

最佳答案

这应该工作

$(document).ready(function(){
var isEditing = false;
$("#plot_info input[type=button]").click(function() {
    $("#plot_info ul li").each(function(){
      if (!isEditing) {
        var span_id = $(this).children('span').attr('id');
        var span_text = $(this).children('span').text();
        $(this).children('span').replaceWith('<input type="text" value="'+span_text+'" id="'+span_id+'">');
      } else {
        var input_id = $(this).children('input').attr('id');
        var input_val = $(this).children('input').val();
        $(this).children('input').replaceWith('<span type="text" id="'+input_id+'">'+input_val+'</span>');
        $(this).children('span').on("click", function(){editSpan($(this))});
      }
    });
  $("#plot_info input[type=button]").prop('disabled',false);
  $(this).prop('disabled',true);
  isEditing = !isEditing; // toggle boolean
});

$("#plot_info li span").on("click", function(){editSpan($(this))});

function editSpan(span){
  var span_id = span.attr('id');
  var span_text = span.text();
  span.replaceWith('<input type="text" value="'+span_text+'" id="'+span_id+'">');
  $("#change_plot_info").prop('disabled',true);
  $("#set_plot_info").prop('disabled',false);
  isEditing = true;
}

});

span { cursor: pointer }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plot_info">
  <ul>
        <li>Coordinates: <span id="coordinates">(e,e)</span></li>
        <li>Building: <span id="building">castle</span></li>
        <li>Terrain: <span id="terrain">soft</span></li>
        <li>Temperature: <span id="temperature">warm</span></li>
        <li>Humidity: <span id="humidity">normal</span></li>
        <li>Population: <span id="population">1000</span></li>
        <li>Money: <span id="money">$1000000</span></li>
        <li>Goods produced: <span id="goods_produced">none</span></li>
        <li>Corruption level: <span id="corruption_level">.33%<span></li>
        <li>Owned by: <span id="owned_by">user</span></li>
    </ul>
    <input id="change_plot_info" type="button" value="Change">
    <input id="set_plot_info" type="button" value="Set" disabled>
</div>

关于javascript - 用jQuery切换onclick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29597033/