How Separate Counter Click
Good evening, My problem is how separate 'First Counter', 'Second Counter', 'Third Counter', that will be count separately. But in GreyDiv and RedDiv must be the same number count
Solution 1:
Okay so here it goes, I upgraded the previous code to use a class that contains your counter values:
class DivCounter {
// constructor for new object;
constructor(numberOfDivs) {
this.divCtrs = [[],[],[]];
this.numberOfDivs = numberOfDivs; // initial number of div in view
for (let i = 0; i < this.numberOfDivs; i++) {
this.divCtrs[0][i] = 0;
this.divCtrs[1][i] = 0;
this.divCtrs[2][i] = 0;
}
}
// initialize new counter div values
createDivCounters() {
this.divCtrs[0].push(0);
this.divCtrs[1].push(0);
this.divCtrs[2].push(0);
}
// start count on specific counter div
startCount(key, ndx) {
this.divCtrs[key][ndx]++;
return this.divCtrs[key][ndx];
}
// set current div count
set currentDivCount(val) {
this.numberOfDivs = val;
}
// get current div count
get currentDivCount() {
return this.numberOfDivs;
}
}
var divObj = new DivCounter(1); // instantiate DivCounter class passing initial number of divs present
var red = 0; // initially red is closed;
$('.AddDiv').on('click', function() {
let numberDiv = divObj.currentDivCount; // get current div count
divObj.createDivCounters(); // initialize new counters
// grey div
let $list = $('<div>', {
class: 'List'
}).append(
$('<div>', {
class: 'count',
id: 'divList_' + numberDiv,
text: 'First Counter'
}), // we can use comma instead of .append() i.e. .append(div1, div2, div3)
$('<div>', {
class: 'countSecond',
id: 'divListSecond_' + numberDiv,
text: 'Second Counter'
}),
$('<div>', {
class: 'countThird',
id: 'divListThird_' + numberDiv,
text: 'Third Counter'
})
);
// red div
let $container = $('<div>', {
class: 'container'
}).append(
$('<div>', {
class: 'count',
id: 'div_' + numberDiv,
text: 'First Counter'
}),
$('<div>', {
class: 'countSecond',
id: 'divSecond_' + numberDiv,
text: 'Second Counter'
}),
$('<div>', {
class: 'countThird',
id: 'divThird_' + numberDiv,
text: 'Third Counter'
})
);
if (red) {
$list.css('display', 'none');
$container.css('display', 'block');
} else {
$list.css('display', 'block');
$container.css('display', 'none');
}
$('.Wrap').prepend($container, $list);
divObj.currentDivCount = ++numberDiv; // increment current div count
});
$(document).on('click', 'div[id^="div"]', function() {
let id = $(this).attr('id').split('_'),
ndx = parseInt(id[1]),
container = id[0];
let $target1 = $target2 = $(''),
targetKey;
if (container === 'divList' || container === 'div') {
$target1 = $(`#div_${ndx}`);
$target2 = $(`#divList_${ndx}`);
targetKey = 0;
} else if (container === 'divListSecond' || container === 'divSecond') {
$target1 = $(`#divSecond_${ndx}`);
$target2 = $(`#divListSecond_${ndx}`);
targetKey = 1;
} else if (container === 'divListThird' || container === 'divThird') {
$target1 = $(`#divThird_${ndx}`);
$target2 = $(`#divListThird_${ndx}`);
targetKey = 2;
}
let increment = divObj.startCount(targetKey, ndx);
$target1.text(increment);
$target2.text(increment);
});
$(".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>
Solution 2:
So I pretty much changed your HTML/JavaScript. Instead of having 2 elements that show up whenever user changes color, now it just changes color of the same element.
HTML:
<div class="Wrap">
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>
JS:
function CounterObj() {
// Current object instance
var currentObj = this;
this.currentInstance = objectsNumber
this.firstCounter = 0;
this.secondCounter = 0;
this.thirdCounter = 0;
// Our html object
this.objCreation = function() {
var $list = $('<div>', {
class: 'List',
// New object will have same color as the rest
style: 'background-color:' + currentColor + ';'
}).append(
$('<div>', {
class: 'count',
id: 'div_' + this.currentInstance,
text: this.firstCounter
})).append(
$('<div>', {
class: 'countSecond',
id: 'divSecond_' + this.currentInstance,
text: this.secondCounter
})).append(
$('<div>', {
class: 'countThird',
id: 'divThird_' + this.currentInstance,
text: this.thirdCounter
}));
// Add new counter List(I have no idea how to call it) to the page
$('.Wrap').prepend($list);
// Increment objects counter
objectsNumber++;
};
// Invoke method from above on every new CounterObj creation
this.objCreation();
// Increment specific counter when specific "button" is clicked
this.firstButton = $('#div_' + this.currentInstance);
this.firstButton.on('click', function() {
$(this).html(++currentObj.firstCounter);
});
this.secondButton = $('#divSecond_' + this.currentInstance);
this.secondButton.on('click', function() {
$(this).html(++currentObj.secondCounter);
});
this.thirdButton = $('#divThird_' + this.currentInstance);
this.thirdButton.on('click', function() {
$(this).html(++currentObj.thirdCounter);
});
}
var objectsNumber = 0;
var currentColor = 'rgba(200, 200, 200, 1)';
// Start with one "List" already in place
new CounterObj();
// Add new "List" and change color events
$('.AddDiv').on('click', function() {
new CounterObj();
});
$('.GreyDiv').on('click', function() {
currentColor = 'rgba(200, 200, 200, 1)';
$('.List').css('background-color', currentColor);
});
$('.RedDiv').on('click', function() {
currentColor = 'red';
$('.List').css('background-color', currentColor);
})
Post a Comment for "How Separate Counter Click"