Как подсчитать клики по элементам родственного элемента и изменить CSS, когда были нажаты все родственные элементы?

Мой код:

 <div class='container'>
   <label>Label 1</label>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <label>Label 2 </label>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
  </div>

Если пользователь нажимает на div внутри контейнера, я добавляю класс «щелкнул», как это

$(".container>div").click(function(){
  $(this).addClass("clicked");
});

Я хочу знать, сколько элементов div щелкнуто рядом с каждой меткой, и когда все элементы div будут нажаты, я хочу добавить класс CSS к этой метке.

Например, когда посетитель щелкнул все 5 элементов div рядом с ярлыком 1, измените его класс,
то же самое для 4 элементов div рядом с ярлыком 2.


javascript jquery css jquery-traversing
person Tushar Ahirrao    schedule 16.04.2012    source источник
comment
Кроме того, я хочу знать, что вы пытались сделать в отношении ваших требований.   -  person Andreas Wong    schedule 16.04.2012
comment
Я не знаю, как найти этот ярлык и подсчитать количество кликов div рядом с ярлыком.   -  person Tushar Ahirrao    schedule 16.04.2012
comment
Я ОТВЕЧАЛ на это ››ЗДЕСЬ‹‹, используя nextUntil. Я надеюсь, что мне разрешат/смогут вставить ответ, если этот вопрос когда-нибудь снова откроется.   -  person mplungjan    schedule 17.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

ДЕМО

$(function() {
  var counter = {};
  $(".container>label").each(function(idx) {
    var labelItem = "label"+idx;
    counter[labelItem]={max:$(this).nextUntil("label").size(), cnt:0, idx:idx};

    $(this).nextUntil("label").on("click",function() {
        if (this.className!="clicked") {
          $(this).addClass("clicked");
          counter[labelItem].cnt++;
          if (counter[labelItem].cnt >= counter[labelItem].max) {
              $(this).parent().find('label').eq(idx).addClass("full").append(" full");
          }
          $(this).append(" - clicked and added to "+labelItem+": "+counter[labelItem]);

        }
    });
  });
});
person mplungjan    schedule 18.10.2012