javascript - 如何使用 jQuery 将字符串放入输入类型 ="text"中？

Question

我不明白为什么我的代码不起作用:我尝试使用 jQuery 将字符串放入 input type="text" 中，但它不起作用。当输入的属性中有空格时，它会分隔字符串的不同元素。

我的 jQuery 代码:

<script type="text/javascript">
    $(document).ready(function() {
        $(".btnEditSerie").click(function (e) {            
            e.preventDefault();
            var tr = $(this).closest('tr');
            var $GroupingId = tr.find('#item_GroupingId').val()
            localStorage['GroupingId'] = $GroupingId;
            var $Title = tr.find('#item_Title').val();
            var $Description = tr.find('#item_Description').val();
            var $Image = tr.find('#item_Image').val();
            $("#b").hide("slow");
            $("#btnretour").show();
            $('#SerieEdit').append("<label id=" + 'test2' + ">" + "Modification de :" + " " + $Title+ "</label>");
            $('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />"
                                 + "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>"
                                 + "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");
            $("#SerieEdit").show();
            $("#TextEdit").show();   
        })

        $('#btnRet').click(function() {
            $("#b").show("slow");
            $("#SerieEdit").hide();
            $("#TextEdit").hide();
            $("#SerieEdit").empty();
            $("#TextEdit").empty();
            $("#btnretour").hide();
        })
    });   
</script>

对于 val()，例如 $Title 必须是一个字符串，当我将 $Title 放入 . Append() 它返回这样的东西:

我悲伤的 html 代码:

<h2>EditRefSerie</h2>
<div id="SerieEdit">
    <div id="TextEdit">
        <label>Titre : </label>
        <input id="SerieNewName" type="text" thrones="" of="" value="Games">
        <label>Description : </label>
        <input id="SerieNewDescription/" type="text" thrones="" of="" value="games">
        <label>Image : </label>
        <input id="SerieNewImage/" type="file" value="Dessin1.jpg">
    </div>
<div id="btnretour" style="">

对于字符串“Games of Throws”，它返回:

<input id="SerieNewName" type="text" thrones="" of="" value="Games">

您有解决办法吗？我正确使用 jQuery 了吗？

Answer 1

你忘记了引号:

你的 JS:

$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />" 
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>" 
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");

应该是:

$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Title + "' id=" + 'SerieNewName' + " />" 
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Description.toString() + "' id=" + 'SerieNewDescription' + "/>" 
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value='"+$Image.toString()+ "' id=" +'SerieNewImage'+"/>");

请注意为 value 属性添加的引号。额外提示:无需将 input types 放入连接的字符串中。如果你这样做的话，它的可读性会更高:

"<input type='text' value='" + val + "' />"

而不是:

"<input type='" + 'text' + "' value='" + val + "' />" 

就像你正在做的那样。