複数の値をテキストエリアにロード

このウェブページをクリックすると、画像をクリックしてコピーできるテキストエリアにコードが表示されます。これまでのところとても良いですが、テキストエリアの現在のコードを置き換えて追加するのではなく、そのいずれかのピクチャをクリックするたびに可能になりました。目標は、あなた自身のレイアウトをまとめて、最後にコードをコピーすることです。複数の値をテキストエリアにロード

<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）を投稿すると、があなたの問題を実証してくれます。詳細については、 [私のWebサイトの何かが動作しません。 ]リンクを貼り付けることはできますか？]（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

テキストエリアの現在の値を変数に読み込み、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); 
});

私もでdata-gridのように、あなたはそれを読むことができる方法をgridClassを識別するために、データ属性を使用することをお勧めしたいthis.dataset.grid

出典

2017-06-20 18:02:18

複数の値をテキストエリアにロード

答えて

関連する問題