我不明白为什么我的代码不起作用:我尝试使用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="">
对于字符串&#34;权力的游戏&#34;它返回:
<input id="SerieNewName" type="text" thrones="" of="" value="Games">
您有想法如何解决它吗?我是否正确使用jQuery?
答案 0 :(得分: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 + "' />"
和你一样。
答案 1 :(得分:0)
您没有正确使用属性的引号,例如。
$('#SerieEdit').append("<label id='" + test2 + "'>" + "Modification de :" + " " + $Title+ "</label>");
答案 2 :(得分:0)
ID在HTML页面中是唯一的。所以你不需要&#34;找到&#34;检索你的价值。
此外,变量不需要&#34; $&#34;
做类似的事情:
$(document).ready(function () {
$(".btnEditSerie").click(function (e) {
e.preventDefault();
var GroupingId = $('#item_GroupingId').val(); // not need to find if you have a id.. id is unique in the HTML page.
localStorage['GroupingId'] = $GroupingId;
var Title = $('#item_Title').val();
var Description = $('#item_Description').val();
var Image = $('#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 + " id='SerieNewDescription'/><label>Image : </label><input type='file' value="+ Image + " id='SerieNewImage'/>");
$("#SerieEdit").show();
$("#TextEdit").show();
});
$('#btnRet').click(function(){
$("#b").show("slow");
$("#SerieEdit").hide();
$("#TextEdit").hide();
$("#SerieEdit").empty();
$("#TextEdit").empty();
$("#btnretour").hide();
})
});