Drehen eines Bereichs in ein Eingabefeld mit jquery

Question

Ich möchte eine bestimmte Anzahl von span-Elemente in Eingabefelder drehen, wenn ich auf die Schaltfläche Bearbeiten und zurück, um zu spannen, wenn ich auf ein anderes klicke, aber ich habe einige Probleme :

Hier ist meine Geige:

Fiddle

Und mein Code:

HTML:

<span id="1">hedh</span> 
<br /> 
<span id="2">2222eh3222222</span> 
<br /> 
<span id="3">333333eh33333</span> 
<br /> 
<span id="4">44444eher44444</span> 
<br /> 
<span id="5">555555edgt5555</span> 
<br /> 

<button id="edit_properties">Edit</button> 
<button id="unedit_properties">Save</button> 

JavaScript:

var switchToInput = function(id_value) { 
    var $input = $("<input>", { 
    val: $(this).text(), 
    type: "text" 
    }); 
    $input.attr("ID", id_value); 
    $(this).replaceWith($input); 
    $input.select(); 
}; 
var switchToSpan = function(id_value) { 
    var $span = $("<span>", { 
    text: $(this).val() 
    }); 
    $span.attr("ID", id_value); 
    $(this).replaceWith($span); 
    $span.on("click", switchToInput); 
} 
$("#edit_properties").on("click", function() { 

    switchToInput(1); 
    switchToInput(2); 
    switchToInput(3); 
    switchToInput(4); 
    switchToInput(5); 

}); 
$("#unedit_properties").on("click", function() { 

    switchToSpan(1); 
    switchToSpan(2); 
    switchToSpan(3); 
    switchToSpan(4); 
    switchToSpan(5); 

}); 

Answer 1

Sie haben mehrere Probleme mit dem Code:

• Die </br> Elemente <br />
• Numerische id Attributwerte verursachen Probleme in bestimmten Browsern sein sollte. Sie sollten sie in alphanumerisch ändern.

• Wenn Sie auf die edit Schaltfläche Sie einen Fehler in der Konsole:

  Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

• Der Umfang der this wird die window nicht die span

Der letzte Punkt ist der wichtigste Problem mit Ihrem Code.

Um dies zu beheben, können Sie eine gemeinsame Klasse auf alle span/input Elemente setzen und eine Funktion zu replaceWith() bereitstellen, die das entsprechende Element erstellt, um den Austausch durchzuführen. Versuchen Sie folgendes:

$("#edit_properties").on("click", function() { 
 
    $('.editable-span').replaceWith(function() { 
 
    return $("<input>", { 
 
     val: $(this).text(), 
 
     type: "text", 
 
     id: this.id, 
 
     class: 'editable-input' 
 
    }); 
 
    }); 
 
}); 
 

 
$("#unedit_properties").on("click", function() { 
 
    $('.editable-input').replaceWith(function() { 
 
    return $("<span>", { 
 
     text: this.value, 
 
     id: this.id, 
 
     class: 'editable-span' 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="s1" class="editable-span">hedh</span><br /> 
 
<span id="s2" class="editable-span">2222eh3222222</span><br /> 
 
<span id="s3" class="editable-span">333333eh33333</span><br /> 
 
<span id="s4" class="editable-span">44444eher44444</span><br /> 
 
<span id="s5" class="editable-span">555555edgt5555</span><br /> 
 

 
<button id="edit_properties">Edit</button> 
 
<button id="unedit_properties">Save</button>

Alternativ können Sie nicht mit den edit oder save Tasten überhaupt die Mühe und setzen nur die contenteditable="true" Attribut auf den span Elemente.

Answer 2

Ersetzen Sie einfach $ (this) durch $ ('span #' + id_value) in der Funktion switchtoInput und es funktioniert.

var switchToInput = function(id_value) { 
 
     var $input = $("<input>", { 
 
     val: $('span#'+id_value).text(), 
 
     type: "text" 
 
     }); 
 
     $input.attr("ID", id_value); 
 
     $('span#'+id_value).replaceWith($input); 
 
     $input.select(); 
 
    }; 
 
    var switchToSpan = function() { 
 
     var $span = $("<span>", { 
 
     text: $(this).val() 
 
     }); 
 
     $span.attr("ID", "loadNum"); 
 
     $(this).replaceWith($span); 
 
     $span.on("click", switchToInput); 
 
    } 
 
    $("#edit_properties").click(function() { 
 
     switchToInput(1); 
 
     switchToInput(2); 
 
     switchToInput(3); 
 
     switchToInput(4); 
 
     switchToInput(5); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="1">hedh</span> 
 
</br> 
 
<span id="2">2222eh3222222</span> 
 
</br> 
 
<span id="3">333333eh33333</span> 
 
</br> 
 
<span id="4">44444eher44444</span> 
 
</br> 
 
<span id="5">555555edgt5555</span> 
 
</br> 
 

 
<button id="edit_properties">Edit</button> 
 
<button id="unedit_properties">Save</button>