前置两个div，在计数器相同的计数点击

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="divList' + divNumber + '" 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: 170px; 
 
    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: 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="divList0" onclick="makeCount(this.id);">My Counter</div> 
 
    </div> 
 
</div> 
 
<button class="AddDiv">AddDiv</button> 
 
<button class="GreyDiv">GreyDiv</button> 
 
<button class="RedDiv">RedDiv</button>

早上好，

我有两个，小问题：

1. 我想点击“我的计数器“（GreyDiv（class =”List“）和RedDiv（class =”count“）中的开始计数（相同的计数）），接下来单击AddDiv并重新计数，但与前两个div分开。

2. 当RedDiv激活并单击AddDiv将显示GreyDiv，但是我希望如果活动是GreyDiv只显示新的GreyDiv（RedDiv在freeground中添加），并且活动时RedDiv只显示新的RedDiv（GreyDiv id已添加在后台）

Answer 1

是这个演示的结果你在找什么？我编辑了你的counter div的id，并有一个'_'。

修订版DEMO

var divNumber = 1; 
 
var divCtrs = [0]; 
 
var red = 0; // initially red is closed; 
 
$('.AddDiv').on('click', function() { 
 
    divCtrs[divNumber] = 0; 
 
    // grey 
 
    var $list = $('<div>', { 
 
    \t class: 'List' 
 
    }).append(
 
    \t $('<div>', { 
 
    \t class: 'count', 
 
     id : 'divList_' + divNumber, 
 
     text : 'My Counter' 
 
    }) 
 
); 
 
    
 
    // red 
 
    var $container =$('<div>', { 
 
    \t class: 'container' 
 
    }).append(
 
    \t $('<div>', { 
 
    \t class: 'count', 
 
     id : 'div_' + divNumber++, 
 
     text : 'My Counter' 
 
    }) 
 
); 
 
    
 
    if (red) { 
 
    \t $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]); 
 
    var $parent = $(this).parent(); 
 
    if ($parent.hasClass('container')) { 
 
    $parent.css({'background-color' : 'lightblue'}); 
 
    } 
 
    if ($parent.hasClass('List')) { 
 
    $parent.css({'background-color' : 'slategrey'}); 
 
    }   
 
    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: 170px; 
 
    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: 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="div_0">My Counter</div> 
 
    </div> 
 
    <div class="List"> 
 
    <div class="count" id="divList_0">My Counter</div> 
 
    </div> 
 
</div> 
 
<button class="AddDiv">AddDiv</button> 
 
<button class="GreyDiv">GreyDiv</button> 
 
<button class="RedDiv">RedDiv</button>