如何使用jQuery更新textarea内部的代码 [英] How to update code inside textarea with jQuery
问题描述
我有一个文本区域，其中将包含用户输入的代码，我想获取该代码并使用jQuery对其进行扫描，以获取名为setting的自定义标记中的值，然后将该值添加至输入中，以便用户能够在不触摸代码的情况下更改设置标签内的值.我能够获取这些值并将其添加到输入中，但是无法使用新值更新代码.
I have a textarea that will contains a code entered by user and I want to get that code and scan it with jQuery to get the value inside a custom tag called setting then add this value to an input so the user will be able to change the value inside setting tag without touching the code. I was able to get the values and add them inside the inputs but I couldn't update the code with the new values.
HTML代码:
<div id='tab-1'>
<textarea id='template-code' cols='67' rows='27'></textarea>
<button id='submit-code'>Submit Code</button>
</div>
<div id='tab-2' class='unactive'>
<form id='settings-form' method='POST'>
<div id='result'></div>
<button id='update-code'>Update Code</button>
</form>
</div>
CSS代码:
.unactive {
display: none
}
jQuery代码:
$('#template-code').change(function (){
var $that = $(this),
template_code = $that.val(),
code = '',
new_data = '';
// Extract settings from the theme and add them to #result
$(document).on('click', '#submit-code', function (){
$('#tab-1').addClass('unactive');
$('#tab-2').removeClass('unactive');
$(template_code).find('setting').each(function (i){
var $this = $(this),
setting_std = $this.text(),
setting_id = $this.attr('id');
code += '<input id="'+setting_id+'" name="'+setting_id+'" type="text" value="'+setting_std+'"><br>';
});
if(code !== ''){
$('#result').html(code);
}
});
// Update old data with the new one
$(document).on('click', '#update-code', function (){
new_data = $( "#settings-form" ).serializeArray();
$.each( new_data, function( i, new_field ) {
template_code += $(template_code).find('setting#'+ new_field.name).text(new_field.value);
console.log(new_field.value);
});
$('#template-code').val(template_code);
$('#tab-1').removeClass('unactive');
return false;
});
});
这是将添加到textarea内的主题代码的示例:
This is an example of the theme code that will be added inside the textarea :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<title><data:blog.pageTitle/></title>
<div id='option-panel' style='display:none!important'>
<setting id='post_thumbnail'>http://lorempixel.com/640/300/</setting>
<setting id='search_icon'>on</setting>
</div>
</head>
<body>
</body>
</html>
这是一个工作的JsFiddle，可以为您简化事情:
This is a working JsFiddle to make things easier for you :
http://jsfiddle.net/mabwhf6a/3/
这是一个解释我想要什么的小视频:
This is a small video that explain what I want :
http://screencast.com/t/XqggRlQI6
推荐答案
您可以尝试使用以下代码用新代码更新旧数据:
You can try this code to update old data with the new one:
$(document).on('click', '#update-code', function (){
new_data = $( "#settings-form" ).serializeArray();
$.each( new_data, function( i, new_field ) {
var xml = $($.parseXML(template_code));
xml.find('setting#'+ new_field.name).text(new_field.value);
template_code = (new XMLSerializer()).serializeToString(xml[0]);
});
$('#template-code').val(template_code);
$('#tab-1').removeClass('unactive');
return false;
});
演示: http://jsfiddle.net/robinhuy/jd2hrgn8/
这篇关于如何使用jQuery更新textarea内部的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
