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:

classDivCounter {
    // constructor for new object;constructor(numberOfDivs) {
        this.divCtrs = [[],[],[]];
        this.numberOfDivs = numberOfDivs; // initial number of div in viewfor (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 valuescreateDivCounters() {
        this.divCtrs[0].push(0);
        this.divCtrs[1].push(0);
        this.divCtrs[2].push(0);
    }

    // start count on specific counter divstartCount(key, ndx) {
        this.divCtrs[key][ndx]++;
        returnthis.divCtrs[key][ndx];
    }

    // set current div countsetcurrentDivCount(val) {
        this.numberOfDivs = val;
    }
    
    // get current div countgetcurrentDivCount() {
        returnthis.numberOfDivs;
    }
}


var divObj = newDivCounter(1); // instantiate DivCounter class passing initial number of divs presentvar red = 0; // initially red is closed;

$('.AddDiv').on('click', function() {
    let numberDiv = divObj.currentDivCount; // get current div count
    divObj.createDivCounters(); // initialize new counters// grey divlet $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 divlet $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;
    } elseif (container === 'divListSecond' || container === 'divSecond') {
        $target1 = $(`#divSecond_${ndx}`);
        $target2 = $(`#divListSecond_${ndx}`);
        targetKey = 1;
    } elseif (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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="Wrap"><divclass="container"><divclass="count"id="div_0">First Counter</div><divclass="countSecond"id="divSecond_0">Second Counter</div><divclass="countThird"id="divThird_0">Third Counter</div></div><divclass="List"><divclass="count"id="divList_0">First Counter</div><divclass="countSecond"id="divListSecond_0">Second Counter</div><divclass="countThird"id="divListThird_0">Third Counter</div></div></div><buttonclass="AddDiv">AddDiv</button><buttonclass="GreyDiv">GreyDiv</button><buttonclass="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:

<divclass="Wrap"></div><buttonclass="AddDiv">AddDiv</button><buttonclass="GreyDiv">GreyDiv</button><buttonclass="RedDiv">RedDiv</button>

JS:

function CounterObj() {
    // Current object instancevar currentObj = this;
  this.currentInstance = objectsNumber
  this.firstCounter = 0;
  this.secondCounter = 0;
  this.thirdCounter = 0;

  // Our html objectthis.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 creationthis.objCreation();

  // Increment specific counter when specific "button" is clickedthis.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);
})

Working JSFiddle