將多個值加載到textarea中

因此，我製作了此網頁，您可以點擊一張圖片，並將一些代碼添加到可以複製的textarea中。到目前爲止這麼好......但我只是設法讓每次點擊其中一個圖片代替textarea中的當前代碼，而不是添加它。目標是將自己的佈局放在一起，最後複製代碼，而不是爲自己編寫一小段代碼。將多個值加載到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>

你們是否有任何想法如何做到這一點？因爲我不是！

來源

2017-06-20 Kazu

請添加有意義的代碼和問題描述在這裏。請不要鏈接到需要修復的網站 - 否則，一旦問題得到解決，或者您鏈接到的網站無法訪問，此問題將對未來的訪問者失去任何價值。發佈 [最小，完整和可驗證示例（MCVE）]（https://stackoverflow.com/help/mcve）演示您的問題將幫助您獲得更好的答案。欲瞭解更多信息，請參閱 [我網站上的某些內容不起作用。我可以直接粘貼一個鏈接嗎？]（https://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

完成！謝謝 – Kazu

這是一個工作示例。我重構了你的代碼，保持簡單。

我已將您的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); 
 
});

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>

來源

2017-06-20 18:04:36 loelsonk

工程精彩。愛你！ – Kazu

只需將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

來源

2017-06-20 18:02:18

將多個值加載到textarea中

回答

相關問題