カウンタークリックして非表示プリペンド（）関数は、

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

重複するIDは間違った考えです。あなたはなぜ

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

を試していないので、必要な数だけ重複したクラスを持つことができますしかし、これが何をするか「数」を含むクラスで、既存または追加-以降の要素にクリックイベントをバインドすることです。そのような要素がクリックされると、そのテキストを取得し、整数に変換し、class = 'count'のすべての要素の値をその数値+1に設定します。

これを実装するには、makeCount

onclick="makeCount(this.id); 

このイベントは、クラスのリスナーとしてclickイベントをバインドしているため、不要になっています。