我有一段生成数据的javascript函数。 我在输入中使用var，然后我解析它们。 当我点击“生成按钮”时一切正常，我的textarea填充了我的数据并解析了vars。 然后，如果我选择删除结果textarea中的数据，在我的输入中更改我的变量以创建不同的报告变体，我再次点击生成按钮，没有任何事情......
尝试添加数据，生成报告，将数据删除到结果textarea中，然后重新生成报告...（网站上的来源清晰（JS，HTML）
非常感谢您的帮助：）
JS CODE：
/**
* Parse a template with data
*
* @param {String} tpl
* @param {Object} data
* @returns {String}
*/
var parseStr = function (tpl, data) {
return tpl.replace(/\{\{([\w\.]*)\}\}/g, function (str, key) {
var keys = key.split('.');
var v = data[keys.shift()];
var l = keys.length;
for (var i = 0; i < l; i++) {
v = v[keys[i]];
}
return typeof v !== 'undefined' && v !== null ? v : '';
});
};
/**
* Array to csv string
*
* @param {Array} ary
* @returns {String}
*/
var ary2csv = function (ary) {
var l = ary.length;
for (var i = 0; i < l; i++) {
ary[i] = ary[i].replace(/"/g, '""');
}
return '"' + ary.join('","') + '"' + "\n"
};
/**
* Add new variable
*/
$('#addVar').on('click', function () {
var nRows = $('#vars > .row').length;
var $new = $('#templates .row').clone();
$new.find('label').attr('for', 'VAR' + nRows).text('{{' + 'VAR' + nRows + '}}');
$new.find('input').attr('id', 'VAR' + nRows);
$new.appendTo('#vars');
});
$(document).on('keyup', '.var', function () {
var len = $(this).val().length;
var $row = $(this).closest('.row');
$row.find('.col-xs-4').text('' + len);
if (len > 35) {
$row.css('color', 'red');
}
else {
$row.css('color', '');
}
});
/**
* Add new group
*/
$('#addGroup').on('click', function () {
var $new = $('#groups .group:first').clone();
$new.find('input').val('');
$new.appendTo('#groups');
});
/**
* Build the report
*/
$('#make').on('click', function () {
// Variables dynamiques
var zones = {};
var nRows = null;
var isValid = true;
$('#zones textarea').each(function () {
var ary = $(this).val().split("\n");
zones[$(this).attr('id')] = ary;
if (nRows === null) {
nRows = ary.length;
}
else if (ary.length !== nRows) {
isValid = false;
return;
}
});
if (!isValid) {
alert('Chaque zone de texte doit contenir le même nombre de lignes (vides ou non vides).');
return;
}
// Variables fixes
var data = {};
$('#vars input').each(function () {
data[$(this).attr('id')] = $.trim($(this).val());
});
// Clear report
$('#report').empty();
// Columns name
var titles = [];
$('#groups .group:first label').each(function () {
titles.push($(this).text());
});
$('#report').append(ary2csv(titles));
// On boucle sur le nombre de ligne dans les zones
for (var i = 0; i < nRows; i++) {
// On ajoute a data chaque zone pour la ligne i
for (var j in zones) {
data[j] = zones[j][i];
}
// On parse chaque texte
$('#groups .group').each(function () {
var cols = [];
$(this).find('input').each(function () {
cols.push(parseStr($(this).val(), data));
});
$('#report').append(ary2csv(cols));
});
}
});
HTML：
<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="fr" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="Cédric Duma">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mass AdText Generator</title>
<!-- main JS libs -->
<script src="assets/js/libs/modernizr.min.js"></script>
<script src="assets/js/libs/jquery-1.10.2.min.js"></script>
<script src="assets/js/libs/jquery-ui.min.js"></script>
<script src="assets/js/libs/bootstrap.min.js"></script>
<!-- Style CSS -->
<link href="assets/css/bootstrap.css" media="screen" rel="stylesheet">
<link href="assets/css/style.css" media="screen" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- General Scripts -->
<script src="assets/js/general.js"></script>
<!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {filter: none !important;}
</style>
<![endif]-->
<link href="assets/css/video-js.css" rel="stylesheet">
<script src="assets/js/video.js"></script>
</head>
<body class="body-wrap">
<!--container-->
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h1>Générateur en masse de textes d'annonce</h1>
</div>
</div>
<div class="col-md-4">
<img src="assets/images/baseline.png" alt="Mass AdText Generator" class="img-responsive">
</div>
</div>
</div>
<br/>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-5">
<p class="text-justify">Vous avez la charge de <b>créer des annonces pour vos campagnes AdWords</b>, et cette tâche peut vite devenir <b>très cronophage</b>. Lorsque vous cumulez un important nombre de campagnes et/ou de groupes d'annonces et que vous souhaitez écrire 3 annonces à chaque fois, vous vous embarquez pour quelques heures de travail.<br/>
<br/><b>Créez automatiquement des centaines d'annonces</b> rapidement et cela en quelques clics grâce à cette application simple d'utilisation ! Il vous suffit de préparer en amont quelques informations pour remplir les différentes zones de textes.<br/><br/>Remplacez ensuite le contenu des variantes de textes d'annonces avec vos variables, cliquer sur le bouton "Générer le rapport" et voila ! Il ne vous reste plus qu'à utiliser Excel pour convertir ces données au format CSV pour les intégrer dans AdWords Editor par exemple.</p>
</div>
<div class="col-md-6 pull-right">
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>-->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br/>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Première étape : Listez vos groupes d'annonces ainsi que les textes spécifiques.</h2>
<small>Définissez vos noms de groupes d'annonces, Lignes de description, Url finale ou tout autre texte spécifique.</small>
</div>
</div>
</div>
</section>
<br/>
<section>
<div class='container'>
<p class="alert alert-warning">Il est important que chaque zone de texte comporte le même nombre de lignes pour que la génération soit possible.
<br/>Il est possible d'insérer <b>des lignes vides</b></p>
<br/>
</div>
</section>
<div class="container">
<section id="zones" class="row">
<div class="col-xs-3 text-center">
<label for="AG">Groupe d'annonce</label>
<br/><small>Variable {{AG}} </small>
<br />
<textarea id="AG"></textarea>
</div>
<div class="col-xs-2 text-center">
<label for="D1">Texte alternatif 1</label>
<br/><small>Variable {{D1}} </small>
<br />
<textarea id="D1"></textarea>
</div>
<div class="col-xs-2 text-center">
<label for="D2">Texte alternatif 2</label>
<br/><small>Variable {{D2}} </small>
<br />
<textarea id="D2"></textarea>
</div>
<div class="col-xs-2 text-center">
<label for="URLDIS">Url Display</label>
<br/><small>Variable {{URLDIS}} </small>
<br />
<textarea id="URLDIS"></textarea>
</div>
<div class="col-xs-3 text-center">
<label for="URLDES">Url de Destination</label>
<br/><small>Variable {{URLDES}} </small>
<br />
<textarea id="URLDES"></textarea>
</div>
</section>
<hr />
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Seconde étape : Ajoutez vos propres variables</h2>
<small>Rajoutez vos textes personnalisés et utilisez les variables <b>{{VAR0}}</b>,<b>{{VAR1}}</b>, etc. pour les insérer dans les variation de vos textes d'annonce. </small>
</div>
</div>
</div>
</section>
<br/>
<section id="vars">
<a id="addVar"><span class="glyphicon glyphicon-plus-sign green" aria-hidden="true"></span> Ajouter une variable</a>
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="VAR0">{{VAR0}}</label>
</div>
<div class="col-xs-5">
<input type="text" id="VAR0" class="var" style="width: 350px;"/>
</div>
<div class="col-xs-4">
0
</div>
</form>
</div>
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="VAR1">{{VAR1}}</label>
</div>
<div class="col-xs-5">
<input type="text" id="VAR1" class="var" style="width: 350px;"/>
</div>
<div class="col-xs-4">
0
</div>
</form>
</div>
</section>
<hr />
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Troisième étape : Créez vos modèles de textes d'annonce</h2>
<small>Utilisez du texte ou une variable disponible pour construire chacune des variations d'un texte d'annonce.</small>
</div>
</div>
</div>
</section>
<br/>
<section id="groups">
<a id="addGroup"><span class="glyphicon glyphicon-plus-sign green" aria-hidden="true"></span> Ajouter une variation d'annonce</a>
<br/>
<section class="group">
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="titre">Titre</label>
</div>
<div class="col-xs-5">
<input type="text"/>
</div>
</form>
</div>
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="desc1">Description 1</label>
</div>
<div class="col-xs-5">
<input type="text"/>
</div>
</form>
</div>
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="desc1">Description 2</label>
</div>
<div class="col-xs-5">
<input type="text"/>
</div>
</form>
</div>
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="desc1">Url Display</label>
</div>
<div class="col-xs-5">
<input type="text"/>
</div>
</form>
</div>
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="desc1">Url Finale</label>
</div>
<div class="col-xs-5">
<input type="text"/>
</div>
</form>
</div>
<hr/>
</section>
</section>
<div class="buttons">
<a href="#" rel="tooltip" id="make" class="btn btn-middle" style="outline: none;" data-placement="right" data-trigger="hover" data-content="cliquer dans la zone de texte, CTRL+C ou CMD+C pour copier." data-html="true">
<span class="gradient">Générer Rapport</span>
</a>
</div>
<!-- <span class="pull-right">cliquer dans la zone de texte, CTRL+C ou CMD+C pour copier</span> -->
<!-- <button class="btn btn-success pull-right btn-s"><a class="white" id="copy-button">Copier !</a></button> -->
<textarea onclick="this.select();" id="report" cols="160" rows="10" class="bg-grey"></textarea>
</div>
<div id="templates" class="hidden">
<div class="row">
<form class="navbar-form">
<div class="col-xs-3">
<label for="var1">{{var1}}</label>
</div>
<div class="col-xs-5">
<input type="text" id="var1" class="var" style="width: 350px;"/>
</div>
<div class="col-xs-4">
0
</div>
</form>
</div>
</div>
<section class="footer">
<div class="container">
<hr/>
<div class="row">
<div class="col-md-2">
<div class="row margin-top-50"><a href="http://link-tags.com"><img src="assets/images/Logo149-40.png" alt="logo Link-tags"></a></div>
</div>
<div class="col-md-3">
<div class="row"></div>
<hr/>
<div class="row">Tout droits Réservés à <a href="https://twitter.com/notcedricD">@notcedricD</a>
</div>
<hr/>
<div class="row">Réalisé avec l'aide de <a href="https://twitter.com/sugatasei">@Sugatasei</a>
</div>
</div>
<div class="col-md-4">
<br/>
<br/>
<div class="alert alert-success text-center">Je partage</div>
<div>
<a href="http://twitter.com/home?status=G%C3%A9n%C3%A9rer+vos+annonces+%23AdWords+en+masse+en+quelques+clics+sur+http%3A%2F%2Flink-tags.com%2Fadgen%2Findex.html+via+%40notcedricD" title="Partager sur Twitter" target="_blank" class="btn btn-middle"><span class="fa fa-twitter"> Twitter</span></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flink-tags.com%2Fadgen%2F" title="Partager sur Facebook" target="_blank" class="btn btn-middle"><span class="fa fa-facebook"> Facebook</span></a>
<a href="https://plus.google.com/share?url=http%3A%2F%2Flink-tags.com%2Fadgen%2F" title="Partager sur Google+" target="_blank" class="btn btn-middle"><span class="fa fa-google-plus"> Google+</span></a>
<a href="http://www.linkedin.com/shareArticle?mini=true&title=Mass+Adtext+Generator&url=http%3A%2F%2Flink-tags.com%2Fadgen%2F" title="Partager sur LinkedIn" target="_blank" class="btn btn-middle"><span class="fa fa-linkedin"> LinkedIn</span></a>
</div>
</div>
<div class="col-md-3 widget-container widget-profile boxed">
<div class="inner clearfix">
<div class="avatar"><img src="assets/images/cedric-duma.jpg" alt=""></div>
<h5>Cédric Duma</h5>
<span class="subtitle">Consultant SEA</span>
<div class="follow">
<a href="https://twitter.com/notcedricD" class="btn btn-follow" style="outline: none;"><span class="gradient">Suivez-moi</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-31710454-3', 'auto');
ga('send', 'pageview');
</script>
<script>
$('[rel=tooltip]').popover({html: true});
</script>
</body>
</html>
答案 0 :(得分：0)
问题出在这里
$('#report').append("wathever")
你使用带有textarea的append方法，这是一个错误，请使用val方法
$('#report').val("wathever")
最后，改为使用
/**
* Build the report
*/
$('#make').on('click', function () {
// Variables dynamiques
var zones = {};
var nRows = null;
var isValid = true;
$('#zones textarea').each(function () {
var ary = $(this).val().split("\n");
zones[$(this).attr('id')] = ary;
if (nRows === null) {
nRows = ary.length;
}
else if (ary.length !== nRows) {
isValid = false;
return;
}
});
if (!isValid) {
alert('Chaque zone de texte doit contenir le même nombre de lignes (vides ou non vides).');
return;
}
// Variables fixes
var data = {};
$('#vars input').each(function () {
data[$(this).attr('id')] = $.trim($(this).val());
});
// Clear report
//edited by jorgesuarezch
$('#report').val("");
// Columns name
var titles = [];
$('#groups .group:first label').each(function () {
titles.push($(this).text());
});
//edited by jorgesuarezch
$('#report').val(ary2csv(titles));
// On boucle sur le nombre de ligne dans les zones
for (var i = 0; i < nRows; i++) {
// On ajoute a data chaque zone pour la ligne i
for (var j in zones) {
data[j] = zones[j][i];
}
// On parse chaque texte
$('#groups .group').each(function () {
var cols = [];
$(this).find('input').each(function () {
cols.push(parseStr($(this).val(), data));
});
//edited by jorgesuarezch
$('#report').val( $('#report').val() + ary2csv(cols));
});
}
});