单独计数器如何单击 [英] How separate counter click

查看：87 发布时间：2017/2/16 18:53:00 javascript jquery html css

本文介绍了单独计数器如何单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

'，{class：'countSecond'，id：'divListSecond_'+ divNumber，text：'Second Counter'}））append（$& 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]' $（this）.attr（'id'）; var ndx = parseInt（id.split（'_'）[1]）; divCtrs [ndx] ++; $（'＃div_'+ ndx）.text [ndx]）; $（'＃divList_'+ ndx）.text（divCtrs [ndx]）;}）; $（GreyDiv）。 .container）。css（{display：'none'}）; $（List）。css（{display：'block'}）;}）;点击，function（）{red = 1; $（。container）css（{display：'block'}））;

  .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;}。 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;位置：相对; 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 =countid =div_0>第一计数器< / div> < div class =countSecondid =divSecond_0>第二计数器< / div> < div class =countThirdid =divThird_0>第三计数器< / div> < / div> < div class =List> < div class =countid =divList_0>第一计数器< / div> < div class =countSecondid =divListSecond_0>第二计数器< / div> < div class =countThirdid =divListThird_0>第三计数器< / div> < / div>< / div>< button class =AddDiv> AddDiv< / button>< button class =GreyDiv> GreyDiv< / button>< button class =RedDiv> RedDiv< / button>

晚上好，
问题是如何分开第一计数器，第二计数器，第三计数器，将分别计数。但是在GreyDiv和RedDiv中必须是相同的数字计数。

感谢您的时间和帮助

解决方案

它升级了，我升级了以前的代码，以使用包含您的计数器值的类：

  class DivCounter {// new object的构造函数; constructor（numberOfDivs）{this.divCtrs = [[]，[]，[]]; this.numberOfDivs = numberOfDivs; //视图中的div的初始数目for（let i = 0; i

  .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;}。 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;位置：相对; 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 =countid =div_0>第一计数器< / div> < div class =countSecondid =divSecond_0>第二计数器< / div> < div class =countThirdid =divThird_0>第三计数器< / div> < / div> < div class =List> < div class =countid =divList_0>第一计数器< / div> < div class =countSecondid =divListSecond_0>第二计数器< / div> < div class =countThirdid =divListThird_0>第三计数器< / div> < / div>< / div>< button class =AddDiv> AddDiv< / button>< button class =GreyDiv> GreyDiv< / button>< button class =RedDiv> RedDiv< / button>

 


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>





Good evening,
My problem is how separate "First Counter", "Second Counter", "Third Counter", that will be count separately. But in GreyDiv and RedDiv must be the same number count. 

Thank you for your time and help 
 解决方案 
Okay so here it goes, I upgraded the previous code to use a class that contains your counter values:



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>





                        这篇关于单独计数器如何单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

单独计数器如何单击 [英] How separate counter click

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

单独计数器如何单击 [英] How separate counter click

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭