如何使用javascript事件处理程序

我有一个2列的布局，左边有一个显示代码的按钮，右边有一些html。 上面的内容重复了很多次，所以我有一个按钮列表，我想与它旁边的“小部件”相关。 如果单击每个按钮，我希望在警报框的右侧显示元素的innerHTML。 我右边的html小部件是一个名为“mywidgets”的类，左边的按钮有一个名为“showcode”的类

在javascript或jquery中，我如何在单击左侧按钮的同时将相关框的代码显示在右侧

如果我这样做：

var showthem = document.getElementsByClassName('mywidgets');
for (var i=0; i < widgetBits.length; i++) {

 };

HTML:

左侧区域：

 <div class="container marginBTM10">
<div class="row">      

  <div class="col-lg-offset-2 col-md-offset-2 col-lg-10 col-md-10 bgColor_FFF padding10">
    <h2>Widget 1</h2>
   <div class="highlight">
      <button class="btn btn-primary btn-sm " onclick="widgets()">get code</button>

小部件1
获取代码

右侧区域：

  <div class="col-lg-4 col-md-4">
    <!-- widget 1 starts-->
    <div class="sortable bgColor_FFF mywidgets">
      <div class="padding10">

        <a href="#">stuff</a>
      </div>
    </div>
    <!-- widget 1 ends-->
  </div>
</div>

要连接按钮和小部件，必须在单个标记中使用。 在这种情况下：小部件具有id，相应的按钮具有相同值的数据id

HTML:

按钮：

<button class="btn btn-primary btn-sm get_class" data-id="#mywidgets1">
...
<button class="btn btn-primary btn-sm get_class" data-id="#mywidgets2">
...

JQ

$('.get_class').click(function () {
    //get id of selected widget
    var id = $(this).data('id');
    //get selected widget
    var $widget = $(id);
    //clon and add selected widget
    $widget.clone().appendTo(".myareofchoce");

})

更新：2

$（'.get_class'）。单击（函数（）{
var id=$（this.data（'id'）；
var$widget=$（id）；
var html=$widget.html（）；
//解决方案1-输出到文本区域
var txt=$（“.myareofchoce2”）.val（）；
$（.myareofchoce2”）.val（txt+“\r\n”+html）；
//解决方案2-使用标签
html=''+html+''；
$（“.myareofchoce”）.append（html）；
})

您可以发布html小部件和按钮代码列表吗？多次获取代码html代码等只需编辑您的问题并将html代码粘贴到那里。如何显示结果的html？目前此修复程序仅显示文本输出（我需要查看标记等）

div class="sortable bgColor_FFF mywidgets" id="mywidgets1">
...
div class="sortable bgColor_FFF mywidgets" id="mywidgets2">
...

$('.get_class').click(function () {
    //get id of selected widget
    var id = $(this).data('id');
    //get selected widget
    var $widget = $(id);
    //clon and add selected widget
    $widget.clone().appendTo(".myareofchoce");

})

$('.get_class').click(function () {
    var id = $(this).data('id');
    var $widget = $(id);

    var html=$widget.html();

    //solution 1 - output to the textarea
    var txt=$(".myareofchoce2").val();
    $(".myareofchoce2").val(txt+"\r\n"+html);

    //solution 2 - use <xmp> tag
    html='<xmp >'+html+'</xmp >';    
    $(".myareofchoce").append(html);
})