Question

var divNumber = 1;
$('.AddDiv').on('click', function() {
  $('.Wrap').prepend($('<div class="container"><div class="count" id="div' + divNumber + '" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
  divNumber++;
});

var divNumber = 1;
$('.AddDiv').on('click', function() {
  $('.Wrap').prepend($(' <div class="List"><div class="count" id="divList' + divNumber + '" onclick="makeCount(this.id);">My Counter</div></div></div>'));
  divNumber++;
});

function makeCount(id) {
  var count = parseInt($("#" + id).text());
  if (isNaN(count)) {
    count = 1; //For the first click
  } else {
    count++;
  }

  $("#" + id).text(count);
}

$(".GreyDiv").on("click", function() {
  $(".container").css({
    display: 'none'
  });
  $(".List").css({
    display: 'block'
  });
});
$(".RedDiv").on("click", function() {
  $(".container").css({
    display: 'block'
  });
  $(".List").css({
    display: 'none'
  });
});

.Wrap {
  width: 650px;
  height: 800px;
}
.container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 170px;
  height: 120px;
  background-color: red;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  display: none;
}
.List {
  position: relative;
  top: 5px;
  left: 5px;
  width: 300px;
  height: 120px;
  background-color: rgba(200, 200, 200, 1);
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}
.AddDiv {
  position: absolute;
  top: 0px;
}
.GreyDiv {
  position: absolute;
  top: 0px;
  left: 170px;
}
.RedDiv {
  position: absolute;
  top: 0px;
  left: 250px;
}
.count {
  position: absolute;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background-color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="container">
    <div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
  </div>
  <div class="List">
    <div class="count" id="divList0" onclick="makeCount(this.id);">My Counter</div>
  </div>
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

早上好，

我有两个小问题：

我想单击“我的计数器”（白色框中的文本）并在GreyDiv（class =“List”）和RedDiv（class =“count”）中开始计数（相同的计数），然后单击AddDiv并重新计算，但与前两个div分开。
当RedDiv处于激活状态并单击AddDiv将显示GreyDiv，但我想如果活动是GreyDiv只显示新的GreyDiv（Reddiv添加到bacground中），而当活动时RedDiv只显示新的RedDiv（GreyDiv id在后台添加）

Answer 1

这个演示的结果是什么？我编辑了你的计数器div的id以得到'_'。

更新的演示

var divNumber = 1;
var divCtrs = [0];
var red = 0; // initially red is closed;
$('.AddDiv').on('click', function() {
  divCtrs[divNumber] = 0;
  // grey
  var $list = $('<div>', {
  	class: 'List'
  }).append(
  	$('<div>', {
    	class: 'count',
        id   : 'divList_' + divNumber,
        text : 'My Counter'
    })
  );
  
  // red
  var $container =$('<div>', {
  	class: 'container'
  }).append(
  	$('<div>', {
    	class: 'count',
        id   : 'div_' + divNumber++,
        text : 'My Counter'
    })
  );
  
  if (red) {
  	$list.css('display', 'none');
    $container.css('display', 'block');
  } else {
    $list.css('display', 'block');
    $container.css('display', 'none');
  }
  
  $('.Wrap').prepend($container, $list)
  
});


$(document).on('click','div[id^="div"]', function(){
  var id = $(this).attr('id');
  var ndx = parseInt(id.split('_')[1]);
  var $parent = $(this).parent();
  if ($parent.hasClass('container')) {
    $parent.css({'background-color' : 'lightblue'});
  }
  if ($parent.hasClass('List')) {
    $parent.css({'background-color' : 'slategrey'});
  }        
  divCtrs[ndx]++;
  $('#div_' + ndx).text(divCtrs[ndx]);
  $('#divList_' + ndx).text(divCtrs[ndx]);
});

$(".GreyDiv").on("click", function() {
  red = 0;
  $(".container").css({
    display: 'none'
  });
  $(".List").css({
    display: 'block'
  });
});

$(".RedDiv").on("click", function() {
  red = 1;
  $(".container").css({
    display: 'block'
  });
  $(".List").css({
    display: 'none'
  });
});

.Wrap {
  width: 650px;
  height: 800px;
}
.container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 170px;
  height: 120px;
  background-color: red;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  display: none;
}
.List {
  position: relative;
  top: 5px;
  left: 5px;
  width: 300px;
  height: 120px;
  background-color: rgba(200, 200, 200, 1);
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}
.AddDiv {
  position: absolute;
  top: 0px;
}
.GreyDiv {
  position: absolute;
  top: 0px;
  left: 170px;
}
.RedDiv {
  position: absolute;
  top: 0px;
  left: 250px;
}
.count {
  position: absolute;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background-color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="container">
    <div class="count" id="div_0">My Counter</div>
  </div>
  <div class="List">
    <div class="count" id="divList_0">My Counter</div>
  </div>
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

前置两个div，在计数器点击中计数相同

1 个答案: