所以我创建了这个网页,您可以点击图片,它会为您提供一些可以复制的文本区域的代码。到目前为止一切都那么好......但我只是设法让每次你点击其中一张图片时它取代了textarea中的当前代码,而不是添加它。目标是将您自己的布局放在一起,并在最后复制代码,而不是每一小段代码。
<body>
<a class="gridstyle grid-70-30" href="#"><img src="http://www.awesome-business.com/hero/70-30.jpg" alt="" /></a>
<a class="gridstyle grid-30-70" href="#"><img src="http://www.awesome-business.com/hero/30-70.jpg" alt="" /></a>
<a class="gridstyle grid-33-33-33" href="#"><img src="http://www.awesome-business.com/hero/33-33-33.jpg" alt="" /></a>
<a class="gridstyle grid-25-25-25-25" href="#"><img src="http://www.awesome-business.com/hero/25-25-25-25.jpg" alt="" /></a>
<a class="gridstyle kategorien" href="#"><img src="http://www.awesome-business.com/hero/kategorien.jpg" alt="" /></a>
<div class="clear"></div>
<div class="textausgabe"></div>
<button class="copy">Copy Textarea</button>
<textarea id="target"></textarea>
</body>
<script id="grid-70-30" type="text/template">
<div class='grid12-8'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-30-70" type="text/template">
<div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-8'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-33-33-33" type="text/template">
<div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-25-25-25-25" type="text/template">
<div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='clearer'></div>
</script>
<script id="kategorien" type="text/template">
<div></div>
</script>
<script type="text/javascript">
jQuery("button.copy").click(function () {
jQuery("textarea#target")[0].select();
var successful = document.execCommand('copy');
if(successful) {
alert('Copied');
}
});
jQuery(".grid-70-30").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-70-30").html()));
});
jQuery(".grid-30-70").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-30-70").html()));
});
jQuery(".grid-33-33-33").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-33-33-33").html()));
});
jQuery(".grid-25-25-25-25").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#grid-25-25-25-25").html()));
});
jQuery(".kategorien").click(function () {
jQuery("textarea#target").val( jQuery.trim(jQuery("#kategorien").html()));
});
</script>
你们有任何想法怎么做吗?因为我没有!
答案 0 :(得分:0)
只需将textarea的当前值读入变量,将html添加(连接)到它,然后将其分配回textarea。
你可以像这样简化你的javascript代码:
jQuery('.gridstyle').on('click', function(event){
var gridClass = this.className.substr(10),
selectedGridHtml = jQuery.trim(jQuery('#' + gridClass).html()) + "\n",
txtArea = jQuery('#target');
txtArea.val(txtArea.val() + selectedGridHtml);
});
我还建议使用数据属性来识别gridClass
,就像data-grid
一样,您可以使用this.dataset.grid
答案 1 :(得分:0)
这是一个有效的例子。我已经重构了您的代码,以保持简单。
我已将anchor
个名称从类移到grid-*
属性,从而更改了您的data-grid
代码。
class="gridstyle" data-grid="grid-70-30"
这样我们就可以通过data-grid
引用它来获取您点击的网格类型。
var grid = $(this).attr('data-grid');
之后我们只为现有值添加一个新值。
运行Run code snippet
以查看其实际效果。
$('.gridstyle').click(function(e) {
var grid = $(this).attr('data-grid');
var textarea = $('#target');
var oldValue = textarea.val();
var newValue = $('#' + grid).html();
textarea.val(oldValue + newValue);
});
&#13;
textarea {
height: 100px; width: 100%
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="copy">Copy Textarea</button>
<textarea id="target"></textarea>
<a class="gridstyle" data-grid="grid-70-30" href="#"><img src="http://www.awesome-business.com/hero/70-30.jpg" alt="" /></a>
<a class="gridstyle" data-grid="grid-30-70" href="#"><img src="http://www.awesome-business.com/hero/30-70.jpg" alt="" /></a>
<a class="gridstyle" data-grid="grid-33-33-33" href="#"><img src="http://www.awesome-business.com/hero/33-33-33.jpg" alt="" /></a>
<a class="gridstyle" data-grid="grid-25-25-25-25" href="#"><img src="http://www.awesome-business.com/hero/25-25-25-25.jpg" alt="" /></a>
<a class="gridstyle" data-grid="kategorien" href="#"><img src="http://www.awesome-business.com/hero/kategorien.jpg" alt="" /></a>
<div class="clear"></div>
<div class="textausgabe"></div>
<script id="grid-70-30" type="text/template">
<div class='grid12-8'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-30-70" type="text/template">
<div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-8'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-33-33-33" type="text/template">
<div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='grid12-4'>Hier steht Inhalt</div><div class='clearer'>
</script>
<script id="grid-25-25-25-25" type="text/template">
<div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='grid12-3'>Hier steht Inhalt</div><div class='clearer'></div>
</script>
<script id="kategorien" type="text/template">
<div></div>
</script>
&#13;