Question

我有一个textarea，它将包含用户输入的代码，我想获取该代码并使用jQuery扫描它以获取名为settings的自定义标记内的值，然后将此值添加到输入中，以便用户能够更改设置标记内的值而不触及代码。我能够获取值并将它们添加到输入中，但我无法使用新值更新代码。

HTML CODE：

<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 CODE：

$('#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中添加的主题代码示例：

<?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：

http://jsfiddle.net/mabwhf6a/3/

这是一个小视频，可以解释我想要的内容：

http://screencast.com/t/XqggRlQI6

Answer 1

您可以尝试使用以下新代码更新旧数据：

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

Answer 2

好的，这里的想法基于，嗯...简单的搜索/替换动态正则表达式构建（该部分可以/应该改进，也许有更好的正则表达式，你可以有更好的解决方案。我在正则表达式，但也，HTML不应该用正则表达式解析:)）。你的代码的第一部分就是......我已经改变了第二个功能。

$(document).on('click', '#update-code', function (){

    //template_code=$('#template-code').val();

for(i=0;i<$('input:text').length;i++)  {

dynamic_regex="(<setting id='"+$('input:text').eq(i).attr('id')+"'>)(.*?)(</setting>)";

var regex = new RegExp(dynamic_regex, 'gm');

var subst = '$1'+ $('input:text').eq(i).val() +'$3'; 
$('#template-code').val($('#template-code').val().replace(regex, subst));

    }

});

因此，文本输入的数量是动态的（在3个设置标签上测试！），并且基于该数字（长度）和输入id - 我们构建正则表达式并用输入值替换标签文本（逐行）。当然，textarea val必须正确更新。

演示：的 http://jsfiddle.net/5zcxbaqf/

如何使用jQuery

2 个答案: