Question

我有一个2列布局，左边我有一个显示代码的按钮，右边我有一些HTML。以上是重复多次，所以我有一个按钮列表，我想要与＆＃34;小部件＆＃34;在它的旁边。如果我点击每个按钮，我想在警告框中向右显示元素的innerHTML。我的右栏html小部件是一个名为＆＃34; mywidgets＆＃34;的类，左边的按钮有一个名为＆＃34; showcode＆＃34;

的类

如何在javascript或jquery中单击左侧的按钮向右显示相关框的代码？

如果我这样做：

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

 };

但是我对如何计算每个按钮和单独区域中的每个类感到困惑，然后在点击时显示代码。

我也在考虑类似于下面的内容，但我又对如何利用＆＃34; /＆＃34; /每个项目点击感到困惑。

$(document).ready(function(){
  $("button").click(function(){
    $("mywidgets").clone().appendTo("myareofchoce");
});
});

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>

右手区域：

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

Answer 1

http://jsfiddle.net/wne6rnda/1/

连接按钮和小部件必须在单个标签中使用。在这种情况下：widget具有id，相应的按钮具有相同值的data-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">
...

窗口小部件：

div class="sortable bgColor_FFF mywidgets" id="mywidgets1">
...
div class="sortable bgColor_FFF mywidgets" 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

http://jsfiddle.net/wne6rnda/9/

$('.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);
})

如何使用javascript事件处理程序

1 个答案: