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

您需要做的就是使用.each()函数捕获所有span标记和输入标记，然后用适当的内容替换如下代码：

// Change Button
$("#change_plot_info").click(function() {
    alert("Get ready to enter 'EDIT MODE'");
    $(this).prop('disabled',true); //<-- disable this button after clicked
    $("#set_plot_info").prop('disabled',false); //<-- Enable set button
    $("#plot_info ul span").each(function(){
        var myVal = $(this).text(),id = $(this).attr('id');
        $(this).replaceWith("<input type='text' value='" + myVal + "' id='" + id + "'>");
    });
});

// Set button
$("#set_plot_info").click(function() {
    alert("SET");
    $(this).prop('disabled',true); //<-- disable this button after clicked
    $("#change_plot_info").prop('disabled',false); //<-- Enable change button
    $("#plot_info ul input").each(function(){
        var myVal = $(this).val(),id = $(this).attr('id');
        $(this).replaceWith("<span id='" + id + "'>"+myVal+"</span>");  
    });
 });

这是有效的fiddle

Answer 2

这应该有效

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

Answer 3

尝试这一点，当你点击更改它切换按钮状态并出现一个输入框，点击设置后它将用新的替换当前值

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

这里我添加了一个带有txtChn类的span，它作为输入

的包装器

    $("#change_plot_info, #set_plot_info").click(function() {
        var ID = $(this).attr('id');
        $(this).prop('disabled', true); // Disable clicked button
        $(this).siblings('input').prop('disabled', false); // Enable the other one


// Use $(element).prop('disabled', true);  To disable
// Use $(element).prop('disabled', false);  To Enable 

        switch(ID){ // Verify which button has been clicked and trigger an event
            case "change_plot_info": 
// If change is clicked -> allow Editing
                $("#plot_info span").click(function() {
                    var span_id = this.id;
                    var span_text = $(this).text();
                    $(this).next('.txtChn').html("<input type='text' value= '"  + span_text +  "'>");
                });
                break;
            case"set_plot_info":
 // When set is clicked updated new values that are set

                $(".txtChn input").each(function(i,val) {
                  var  $this = $(this);
                    if(val){
                        $this.parent('.txtChn').siblings('span').text($this.val());
                    }

                });
                $(".txtChn").html('');  // remove edit inputs
                break;
        }
    });

用jquery切换onclick

3 个答案: