PiotrS PiotrS - 25 days ago 11
HTML Question

How separate counter click



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 : 'First Counter'
})).append(
$('<div>', {
class: 'countSecond',
id : 'divListSecond_' + divNumber,
text : 'Second Counter'
})).append(
$('<div>', {
class: 'countThird',
id : 'divListThird_' + divNumber,
text : 'Third Counter'
}));

// red
var $container= $('<div>', {
class: 'container'
}).append(
$('<div>', {
class: 'count',
id : 'div_' + divNumber,
text : 'First Counter'
})).append(
$('<div>', {
class: 'countSecond',
id : 'divSecond_' + divNumber,
text : 'Second Counter'
})).append(
$('<div>', {
class: 'countThird',
id : 'divThird_' + divNumber,
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)

});


$(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>





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.

Thank you for your time and help

Answer

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>

Comments