将多个值加载到文本区域中

所以我制作了这个网页，你可以在其中点击图片，它会给你一些代码到一个文本区域，你可以复制。目前为止，一切都好。。。但我只是设法使每次您单击其中一张图片时，它都会替换文本区域中的当前代码，而不是添加它。目标是将您自己的布局放在一起并在最后复制代码，而不是每一小段代码本身。

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

你们知道怎么做吗？因为我没有！

这是工作示例。为了简单起见，我已经重构了您的代码。

我通过将grid-*名称从类移动到data-grid属性来更改您的anchor标签。

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);
});

textarea {
height: 100px; width: 100%
}

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

只需将文本区域的当前值读取到变量中，向其添加(连接(html，然后将其分配回文本区域。

你可以像这样简化你的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读取它

相关内容

最新更新

热门标签：