PiotrS PiotrS - 29 days ago 9
CSS Question

Prepend two divs, the same counting in counter click



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>





Good morning,

I have two, little problems:


  1. I would like click "My Counter" (text in white box) and start count (the same count) in GreyDiv (class="List") and RedDiv (class="count"), next click AddDiv and count anew, but separately from two previous divs.

  2. When RedDiv is activ and click AddDiv will show GreyDiv, but I would like if active is GreyDiv show only new GreyDiv (RedDiv is added in the bacground), and when active is RedDiv show only new RedDiv (GreyDiv id added in the background)


Answer

is the result of this demo what you are looking for? I edited the id's of your counter div to have an '_'

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]);
  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>