Question

我有一个通过jQuery创建的简单div ....

var split = document.createElement('div');
    split.className ="item split";
    $(split).html('<strong>SPLITTER</strong>');

我想在几个简单的函数中使用相同的变量。但是，似乎每当我将变量移出函数时，我只能创建一次div。然后所有其他实例都无法插入div。

测试代码段，它可能有助于更好地解释。

＆＃13;

// Variable is created WITHIN the click function
$('#divide_btn').on('click', function() {
  var split = document.createElement('div');
  split.className = "item split";
  $(split).html('<strong>SPLITTER</strong>');

  $(split).hide(function() {
    //stuff
  }).insertAfter('.moved:last').slideDown(300);
});


// Variable is created OUTSIDE the click function.
var split2 = document.createElement('div');
split2.className = "item split";
$(split2).html('<strong>SPLITTER 2</strong>');


$('#divide_btn2').on('click', function() {
  $(split2).hide(function() {
    //stuff
  }).insertAfter('.moved:last').slideDown(300);
});

＆＃13;

body {
  padding: 0 20px;
  margin: 0;
}
span {
  display: inline-block;
  margin: 5px;
  background: #aaa;
  color: #eee;
  padding: 5px 10px;
}
.item,
.moved,
.split {
  padding: 5px 10px;
  margin: 3px;
  background: #eee;
}
.moved {
  background: #fee;
}
.split {
  background: #aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id="divide_btn">click for internal variable</span><span id="divide_btn2">click for external variable</span>
</p>
<div class="main">
  <div class="item">item</div>
  <div class="item moved">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

＆＃13;

注意区别＆＃34;内部＆＃34;按钮div在点击功能中创建，每次点击新div时都会创建（如预期的那样）。

对于＆＃34;外部＆＃34;按钮变量创建外部单击功能，只能创建一个div。

有没有办法为动态div使用外部变量，并且能够在函数中使用该变量，如果变量是内部的，函数的运行方式是相同的吗？

我正在寻求＆＃34;内部＆＃34;的功能。按钮..但我希望在所有我的函数中使用相同的变量，并且无需在需要的每个函数中复制div创建。

（注意动态div永远不会改变......因此，一旦设置了变量，就不需要编辑它。）

Answer 1

从split2

获取克隆

// Variable is created WITHIN the click function
$('#divide_btn').on('click', function () {
    var split = document.createElement('div');
    split.className ="item split";
    $(split).html('<strong>SPLITTER</strong>');
    
    $(split).hide(function() {
        //stuff
     }).insertAfter('.moved:last').slideDown(300);
   });



// Variable is created OUTSIDE the click function.

var split2 = document.createElement('div');
split2.className ="item split";
$(split2).html('<strong>SPLITTER 2</strong>');

$( '#divide_btn2' ).on('click', function () {
$(split2).clone().hide(function() { // Get clone from split2 *********
                      //stuff
    }).insertAfter('.moved:last').slideDown(300);
   });

body { padding: 0 20px; margin:0;}
span { display: inline-block; margin: 5px; background: #aaa; color: #eee; padding: 5px 10px;}

.item, .moved, .split { padding: 5px 10px; margin: 3px; background: #eee; }

.moved { background: #fee; }

.split { background: #aaa; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id="divide_btn">click for internal variable</span><span id="divide_btn2">click for external variable</span></p>
<div class="main">
  <div class="item">item</div>
  <div class="item moved">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  </div>

Answer 2

<强> 更新

jsFiddle

// Variable is created WITHIN the click function
$('#divide_btn').on('click', function() {
  var split = document.createElement('div');
  split.className = "item split";
  $(split).html('<strong>SPLITTER</strong>');

  $(split).hide(function() {
    //stuff
  }).insertAfter('.moved:last').slideDown(300);
});


// Variable is created OUTSIDE the click function.
function createSplit2() {
  var split2 = document.createElement('div');
  split2.className = "item split";
  $(split2).html('<strong>SPLITTER 2</strong>').hide();
  return $(split2);
}

$('#divide_btn2').on('click', function() {
  createSplit2().insertAfter('.moved:last').slideDown(300);
});

body { padding: 20px; }
span { display: inline-block; margin: 5px; background: #aaa; color: #eee; padding: 5px 10px;}
.item, .moved, .split { padding: 5px 10px; margin: 3px; background: #eee; }
.moved { background: #fee; }
.split { background: #aaa; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span id="divide_btn">click for internal variable</span><span id="divide_btn2">click for external variable</span>
</p>
<div class="main">
  <div class="item">item</div>
  <div class="item moved">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

如何在多个（简单）函数中使用jQuery动态创建div

2 个答案: