javascript - 使用 jquery 切换 onclick

Question

我的代码有问题，但我仍然不确定如何解决我的问题。我什至不确定问题是什么。抱歉，如果这让您感到困惑，我是 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 新手，所以请耐心等待。另请记住，我正在寻找最简单且最接近我的代码，我并不是想减少输入。

一如既往，我们非常感谢对您正在做的事情的任何解释。

Answer 1

这应该有效

$(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>