Нажав на одиночный div основного контейнера div, другие divs основного контейнера должны не работать на них. (JQuery)

У меня есть 12 divs в основном контейнере div. У них разные идентификаторы соответственно. Каждый div имеет 6 кнопок. Когда нажата 1-я кнопка div, не разрешайте нажимать на другую кнопку div до тех пор, пока счет не станет равным 6. Когда счетчик равен 6, нажмите следующий.

Есть ли какое-либо решение в jquery? Я попробовал, но не понял, как это сделать.

Заранее благодарю.

1 ответ

Этот вопрос очень расплывчатый, поэтому я угадываю здесь, но то, что вы хотите сделать, это добавить обработчик для кликов к самому основному div.

Так что ваш главный ДИВ имеет Ид main и предполагая структуру, как это:

<div id="main">
 <div>
 <button>A</button>
 <button>B</button>
 <!-- ...more buttons -->
 </div>
 <div>
 <button>A</button>
 <!-- ...more buttons<-->
 </div>
 <!-- ...more divs -->
 </div>

Вы можете обрабатывать события кликов по мере их перехода на главный, например:

$("#main").on("click", function (e) {
 var data = $(this).data("currentDiv")
 , btnDiv = $(e.target).parent();

 // If no data, this is the first click, prepare
 // the current div data to be stored
 if (!data) {
 data = {el: btnDiv, clicks: 1};
 $(btnDiv).siblings()
 .find("button").attr("disabled", "disabled");
 } 

 // If there *is* data and the parent of the clicked
 // button is not the current div, return early.
 else if (!btnDiv.is(data.el)) {
 return;
 }

 // If is the 6th click, clear the current div and 
 // restore the functionality of all buttons 
 else if (5 === data.clicks) {
 $("button", this).removeAttr("disabled");
 data = null;
 }

 // finally, increment click count if we're between
 // 1 and 5 clicks for this div
 else { data.clicks++; }

 $(this).data("currentDiv", data);
})

http://jsfiddle.net/JJyW7/1/

licensed under cc by-sa 3.0 with attribution.