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>こんばんは、 私の問題は、個別にカウントされることをどのように独立した「第一カウンター」、「第二カウンター」、「第3のカウンタ」、です。しかし、GreyDivとRedDivでは同じ数字が必要です。
はお時間をいただき、ありがとうございます、私はかなりあなたのHTML/JavaScriptを変えそう
達成したいことがわかっているかどうかを確認してください。すべての赤いコンテナは同じ数を持つ必要があり、グレーのコンテナも同じです。 – JanRad
いいえ、赤の最初のカウンターはグレーのような同じ数を持つ必要があります。最初のカウンター、赤の2番目のカウンターはグレーのようなカウントを持つ必要があります2番目のカウンターが1番目のカウンターから3番目のカウンターと同じであるかもしれません – PiotrS