0
var divNumber = 1;
var divCtrs = [0];
var red = 0; // initially red is closed;
$('.AddDiv').on('click', function() {
divCtrs[divNumber] = 0;
// grey
var $list = $('<div>', {
\t class: 'List'
}).append(
\t $('<div>', {
\t class: 'count',
id : 'divList_' + divNumber,
text : 'First Counter'
})).append(
\t $('<div>', {
\t class: 'countSecond',
id : 'divListSecond_' + divNumber,
text : 'Second Counter'
})).append(
\t $('<div>', {
\t class: 'countThird',
id : 'divListThird_' + divNumber,
text : 'Third Counter'
}));
// red
var $container= $('<div>', {
\t class: 'container'
}).append(
\t $('<div>', {
\t class: 'count',
id : 'div_' + divNumber,
text : 'First Counter'
})).append(
\t $('<div>', {
\t class: 'countSecond',
id : 'divSecond_' + divNumber,
text : 'Second Counter'
})).append(
\t $('<div>', {
\t class: 'countThird',
id : 'divThird_' + divNumber,
text : 'Third Counter'
}));
if (red) {
\t $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: 320px;
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: 30px;
height: 30px;
position: absolute;
left: 250px;
top: 50%;
margin-top: -15px;
background-color: white;
text-align: center;
cursor: pointer;
}
.countSecond {
position: absolute;
width: 30px;
height: 30px;
position: absolute;
left: 150px;
top: 50%;
margin-top: -15px;
background-color: white;
text-align: center;
cursor: pointer;
}
.countThird {
position: absolute;
width: 30px;
height: 30px;
position: relative;
left: 50px;
top: 50%;
margin-top: -15px;
background-color: white;
text-align: center;
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">First Counter</div>
<div class="countSecond" id="divSecond_0">Second Counter</div>
<div class="countThird" id="divThird_0">Third Counter</div>
</div>
<div class="List">
<div class="count" id="divList_0">First Counter</div>
<div class="countSecond" id="divListSecond_0">Second Counter</div>
<div class="countThird" id="divListThird_0">Third Counter</div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>Guten Abend, Mein Problem ist, wie eigene "Erster Counter", "Second Counter", "Third Counter", die separat zählen wird. Aber in GreyDiv und RedDiv muss die gleiche Anzahl zählen.
Vielen Dank für Ihre Zeit und helfen
Lassen Sie mich sicherstellen, dass ich verstehe, was Sie erreichen möchten. Alle roten Behälter sollten die gleiche Anzahl haben und das gleiche gilt für graue. – JanRad
Nein, Erster Zähler in Rot sollte die gleiche Anzahl wie grauer erster Zähler haben, zweiter Zähler in Rot sollte die Zählung wie grauer zweiter Zähler haben, kann aber vom ersten Zähler verschieden sein, und derselbe mit drittem Zähler – PiotrS