Как добавить новую строку/столбец

Я работаю над игрой, и у меня были проблемы. То, что я пытаюсь сделать, - это когда все блоки станут фиолетовыми, я хочу создать новую строку и столбец. Я пытался добиться этого, удалив все блоки после того, как все блоки были фиолетовыми, а затем создайте еще одну строку и столбец, чем в прошлый раз, используя переменную rowVal. Я работал над JSFIddle, а ссылка - http://jsfiddle.net/jaredasch1/6dhc240q/. Я отправлю код внизу только так вы можете смотреть быстроКак добавить новую строку/столбец

HTML-

<!DOCTYPE html> 
<body> 
    <div id="button" class="on hover"></div> 
    <br> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <br> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <br> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <br> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
    <div class="block hover"></div> 
</body>

CSS-

.block { 
    height:100px; 
    width:100px; 
    border-radius:10px; 
    display:inline-block; 
    background-color:#33CCFF; 
} 
#button { 
    height:100px; 
    width:410px; 
    border-radius:10px; 
    display:inline-block; 
    background-color:#FF6666; 
    margin-bottom:10px; 
} 
.on { 
    background-color:#D633FF; 
}

JavaScript/JQuery

var main = function() { 
    var rowVal = 5; 
    var setUp = function() { 
     for (var i = 0; i < rowVal; i++) { 
      $("#button").append("<br>"); 
     } 
     for (var k = 0; k < rowVal; k++) { 
      $("<br>").append("<div class=\"block hover\"></div>"); 
     } 
     rowVal++; 
    }; 
    var checkAll = function() { 
     var allDivs = $("div.block"); 
     var classedDivs = $("div.block.on"); 

     var allDivsHaveClass = (allDivs.length === classedDivs.length); 

     if (allDivsHaveClass) { 
      allDivs.remove(".on"); 
      setUp(); 
     } 
    }; 
    $("div").mouseenter(function() { 
     $(this).fadeTo("slow", 0.25); 
     $(this).css('cursor', 'pointer'); 
    }); 
    $("div").mouseleave(function() { 
     $(this).fadeTo("slow", 1); 
     $(this).css('cursor', 'default'); 
    }); 
    $(".block").click(function() { 
     $(this).toggleClass("on"); 
     $(this).prev().toggleClass("on"); 
     $(this).nextAll().eq(4).toggleClass("on"); 
     $(this).next().toggleClass("on"); 
     $(this).prevAll().eq(4).toggleClass("on"); 
     checkAll(); 
    }); 
    $("#button").click(function() { 
     $(".block").removeClass("on"); 
    }); 
    $(document).keydown(function (key) { 
     if (event.which === 32) { 
      $(".block").removeClass("on"); 
     } 
    }); 
}; 
$(document).ready(main);

Я откройте предложения, пожалуйста, ответьте!

источник

2014-09-19 Jasch1

Какая у вас проблема? Что он делает вместо того, что он должен делать? – Barmar

Святая корова, это немного увлекается. – burmat

@Barmar Я хочу добавить clumn и row всякий раз, когда checkAll = true – Jasch1

В checkAll(), добавьте следующее:

$("body").append('<br><div class="block hover"></div>');

источник

2014-09-19 18:49:29 Jean

Просто поместите каждую строку в DIV с классом строки и выполните следующие действия:

var setUp = function() { 
    $('.row').each(function(){ 
     $(this).prepend('<div class="block hover"></div>'); // add one more block to existing rows 
    }) 
    $('body').append($('.row:eq(0)').clone()) // add one row 
};

Вот полный jsfiddle: http://jsfiddle.net/juvian/6dhc240q/1/

источник

2014-09-19 18:54:17 juvian

Небольшое предложение состоит в том, чтобы правильно структурировать ваш HTML-код примерно

<!DOCTYPE html> 
<body> 
    <div id="button" class="on hover"></div> 
    <div class="row"> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
    </div> 
    <div class="row"> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
    </div> 
    <div class="row"> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
    </div> 
    <div class="row"> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
    </div> 
    <div class="row"> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
     <div class="block hover"></div> 
    </div> 
</body>

Затем добавить новый столбец можно использовать

$('.row').each(function(){$(this).append('<div class="block hover"></div>');})

Чтобы добавить новую строку, вы можете просто клонировать Row

$('body').append($($('.row')[0]).clone())

Тогда $ ('строка'). Длина даст ряд строки и $ ($ ('. row') [0]). length даст количество столбцов

источник

2014-09-19 19:02:58

Я пробовал это раньше, тогда случается, что когда я нажимаю один, divs сверху и снизу не меняются – Jasch1

Чтобы добиться этого в '$ (" .block "). Нажмите' вместо '$ (this) .nextAll(). eq (4) .toggleClass (" on ");' вы можете использовать 'var col = $ (this) .siblings(). index (this). '' $ (this) .parent(). prev(). children(). eq (col) .toggleClass ("on"); 'и' $ (this) .parent(). next(). children(). eq (col) .toggleClass («on»); ' –

. Это добавляет дополнительную строку в начале и закручивает, как цвета выше и ниже меняют – Jasch1

Как добавить новую строку/столбец

ответ

Смежные вопросы