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

Scott 发表于 Dev

史考特

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

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

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

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

// 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);
});

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>

请注意区别，对于“内部”按钮，在click函数中创建了div，并且每次单击时都会创建一个新的div（如预期的那样）。

对于“外部”按钮，变量是在click函数外部创建的，并且只能创建一个div。

有没有一种方法可以将外部变量用于动态div，并能够像在内部变量一样使用函数的方式在函数中利用该变量？

我正在寻找“内部”按钮的功能..但我想在所有函数中使用相同的变量，并避免在需要的每个函数中复制div创建的需要。

（请注意，动态div永远不会更改...因此，设置完变量后就无需对其进行编辑。）

微创

更新

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。