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

2023年7月28日 193次阅读

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

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>

请注意区别,对于“内部”按钮,div在click函数中创建,每次单击新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>
点赞