使用jquery切換類

我正在爲類創建一個簡單的瓦片遊戲。我所試圖做的是：使用jquery切換類

父DIV中的一個子類「廣場」，如果點擊，廣場追加到類的父「空」
我需要的父項讓孩子現在成爲班級'空'和現在被佔領的父級班'全'

目前我遇到的問題是孩子們繼續追加班級'空'，和該班不轉換。

我看這裏：Get all elements without child node in jQuery

這裏：http://api.jquery.com/toggleclass/

，這裏是我的代碼筆：http://codepen.io/super996/pen/vyQyxN

// when page loads all parent divs are clickable to .empty class div 
$('document').ready(function() { 


for (let i = 0; i < $('.parent').children().length; i += 1) { 
$('.square').click(function() { 
    $(this).appendTo('.empty'); 
    }); 
    } 
}); 

$('parent:has(.full)').click(function (event) { 
    $(event.target).toggleClass('.empty', true); 
     }); 
     }); 

if ($('.square').click === true) { 
    //parent of sqaure gets class empty and destination of square 
    //parent gets class full 
    }

編輯：我在嘗試這個過程中他..

if ($('.full:first-child').click(function(){ 
$('.full:first-child').removeClass('.')

}）;

來源

2016-12-15 Kevin T.

你的問題是明確的更換你的腳本。你的代碼也很混亂/錯誤，比如你爲什麼需要'for（let i = 0; i <$（'。parent'）。children（）.length; i + = 1）'？ –

即將點擊函數添加到我的所有廣場 –

不需要for循環然後：'$（'。square'）'將選擇dom中所有與square類相關的元素，然後您可以將事件附加到tham –

所以我你如何試圖完成這個有點模糊，但它看起來像你想點擊一個完整的瓷磚時，從.full切換類.empty和.full類添加到空的瓷磚。爲此，您可以通過委派事件的孩子嘗試#board

嘗試：

$(document).ready(function(){ 
    var $board = $('#board'); //Cache the board 

    $board.on('click', 'div.full', function(){ 
    $board.find('div.empty').removeClass('empty').addClass('full'); 
    $(this).addClass('empty').removeClass('full'); 
    }); 

});

這會幫助你沒有做你整個指派;）現在，所有你需要做的是找出其中從.addClass和.removeClass切換到.appendTo和.empty

來源

2016-12-15 02:15:45 DanielC

要了解，「找到類與全div和回調函數是交換。「爲了嘗試和解決問題，我進入了devtools，並使用javascript試圖讓父母和孩子們希望得到它。謝謝丹尼爾！ –

是的，你明白了 – DanielC

這是我完整的javascript代碼。

也許你可以試試這個

// when page loads all parent divs are clickable to .empty class div 
$('document').ready(function() { 
    $('.square').click(function() { 
     var parent = $(this).parent('div'); 
     $(this).appendTo('.empty'); 
     $('.empty').addClass('full').removeClass('empty'); 
     parent.addClass('empty').removeClass('full'); 
    }); 
});

來源

2016-12-15 02:21:39 Kebeng

使用jquery切換類

回答

相關問題