Question

var divNumber = 1;
$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="count" id="div'+divNumber+'" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
  divNumber++;
});

var divNumber = 1;
$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($(' <div class="List"><div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div></div></div>'));
  divNumber++;
});



function makeCount(id){
  var count = parseInt( $("#"+id).text());
  if( isNaN(count) ){
    count = 1; //For the first click
  }else{
    count++;
  }

  $("#"+id).text(count);
}

$(".GreyDiv").on("click", function() {
    $(".container").css({display:'none'});
  $(".List").css({display:'block'});
});
$(".RedDiv").on("click", function() {
    $(".container").css({display:'block'});
  $(".List").css({display:'none'});
});

.Wrap
{
  width:650px;
  height:800px;
}
.container
{
  position:relative;
  top:5px;
  left:5px;
  width:200px;
  height:200px;
  background-color:red;
  float:left;
  margin-left:5px;
  margin-top:5px;
  display:none;
}
.List
{
  position:relative;
  top:5px;
  left:5px;
  width:400px;
  height:150px;
  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:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
  background-color:white;
  text-align:center;
  line-height:100px;
  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="div0" onclick="makeCount(this.id);">My Counter</div>    
    </div>
  <div class="List">
    <div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
    </div>
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

您好，我连接相应的div有问题。我想如果我单击“MyCounter”将在GreyDiv和RedDiv中计算相同的数字，但现在它是单独计数。我希望灰色和红色将是不同外观的相同div。 RedDiv处于活动状态时的最后一个问题，我将点击AddDiv和灰色dic将显示，但应该在后台添加感谢您的帮助和时间

Answer 1

我已经解决了您的古老问题，两年过去了，我认为现在这对您来说不是问题，但也许对其他人有用。我已经完全更改了您的代码，使用了事件委托和一些if-else语句。

<div class="Wrap">
  <div class="container">
    <div class="Boxes">
      <div class="count">My Counter</div>  
    </div> 
  </div>
</div>
<button class="AddDiv">AddDiv</button>
<button class="GreyDiv">GreyDiv</button>
<button class="RedDiv">RedDiv</button>

jQuery部分：

let greyDiv = true;
let redDiv = false;

$('.AddDiv').on('click', function() {
  if(greyDiv,greyDiv){
   $('.Wrap').prepend($('<div class="container"><div class="Boxes" style="width:400px;height:150px;background-color:rgba(200,200,200,1)"><div class="count">My Counter</div></div></div>'));
  } else {
    $('.Wrap').prepend($('<div class="container"><div class="Boxes" style="width:200px;height:200px;background-color:red"><div class="count">My Counter</div></div></div>'));
  }
});
$(document).on('click', function(e){
  if(e.target.className === 'count'){
    if(isNaN(e.target.textContent)){
      e.target.textContent = 1
    } else {
      e.target.textContent++
    }
  }
})
$(".GreyDiv").on("click", function() {
  greyDiv = true;
  redDiv = false;
  $(".Boxes").css({width:'400px',height:'150px',backgroundColor:'rgba(200,200,200,1)'});
});

$(".RedDiv").on("click", function() {
    greyDiv = false;
    redDiv = true;
    $(".Boxes"). css({width:'200px',height:'200px',backgroundColor:'red'});
});

css中的一些变化：

.container{
  position:relative;
  top:5px;
  left:5px;
  float:left;
  margin-left:5px;
  margin-top:5px;
}
.Boxes{
  width:400px;
  height:150px;
  background-color:rgba(200,200,200,1);
}

这是一个有用的小提琴：https://jsfiddle.net/dsm47frh/2/

Answer 2

重复ID是个坏主意。但是，您可以根据需要使用尽可能多的重复类，为什么不尝试

// replaces makeCount() function
$(".count").on("click", function(){
  var num = parseInt($(this).text))
  $(".count").html(num + 1)  
})

这样做是将click事件绑定到包含'count'的类的任何现有或添加的后面元素。当点击任何这样的元素时，我们得到它的文本，转换为整数，然后将class ='count'的所有元素的值设置为该数字+ 1.

要实现此功能，只需将其替换为makeCount（）函数，并删除所有出现的

onclick="makeCount(this.id);

因为我们将click事件绑定为类上的侦听器，所以不再需要它。

计数器单击两个不同的div并隐藏prepend（）函数

2 个答案: