单独的计数器如何点击

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

所以我几乎改变了你的HTML / JavaScript。无论何时用户改变颜色，都不会显示2个元素，现在它只是改变了同一元素的颜色。

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);
})

Working JSFiddle

Answer 2

好的，所以在这里，我升级了以前的代码，使用包含你的计数器值的类：

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>