javascript - 如何分离计数器点击

Question

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>

晚上好我的问题是“第一个柜台”、“第二个柜台”、“第三个柜台”如何分开，将分别计算。但在 GreyDiv 和 RedDiv 中必须是相同的数字计数。

感谢您的宝贵时间和帮助

Answer 1

好的，开始吧，我升级了之前的代码以使用包含您的计数器值的类:

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>