Question

我正在构建一个字谜游戏，将一些混乱的字谜字母中的字母移动到一排空白区块，这样可以让玩家知道这个单词有多少个字母。我已经掌握了基本功能;当您单击任何字母时，它会跳转到第一个可用的空白图块，如果您在其中有一个字母后单击该图块，它会将该字母发送回混乱列表中的第一个空图块。

我的问题是，如果所有空白区块都被填满，用户仍然可以点击混乱的字母，并且当前它会破坏该字母，因为它被发送到具有目标类的div - 只有在上面有空白区块时才存在。 / p>

我已经尝试了几种方法来解决这个问题，我认为最好的方法是获取一个if语句来检查是否有任何线索空间都有目标类 - 如果没有则不附加该字母。我的另一个想法是在点击的字母和空白图块之间切换html。

这是if语句

    if ($('.space-1' || '.space-2' || '.space-3' || '.space-4' || '.space-5').hasClass('target')) {

$('.target').append(letter);
$(this).html('');
}

我似乎无法让这个工作。任何帮助将不胜感激我在过去两天一直坚持这一点。你可以在这里看到游戏：http://jsfiddle.net/alan1986/V3Lv2/

（你可以看到我尝试过的所有不同的解决方案）

Answer 1

您可以尝试api.jquery.com/attribute-contains-selector，这样您就可以使用$(".clue[class*='target']")这将找到具有目标css类的space-x，而不会遍历所有空格。

Answer 2

我意识到这个帖子有点老了，但是如果有人在看这个并想要一个稍微更精致的版本，那么你去吧：

$(document).ready(function() {
    var i = 1;
    var j = 1;
    var k = 0;

    //add number to each letter 
    $('.anagram-letter').each(function(){
        $(this).addClass('letter-' + i);
        i++;
    });

    $('.clue').each(function(){
        $(this).addClass('space-' + j);
        j++;
    });

    //clicking letter sends it to first empty div   
    $('.anagram-letter').click(function(){
        var $this = $(this);
        var clue = $('.clue');
        var target = $('.target');
        //defines the clicked anagram letter content
        var letter = $this.html();
        //loop checking if each clue has a class of target
        var full = clue.each(function(){
            clue.hasClass('target');
            //k counts from 0 adding 1 each time as it moves from clue to clue
            k++;                     
        });

        if(clue.hasClass('target') && $this.html() != ''){
            //add empty class to clicked anagram-letter
            $this.addClass('empty');
            //append letter to first clue with class of target
            target.first().append(letter);
            $this.html('');
            //add full class to first target
            target.first().addClass('full');
            //add target class to the clue next to the original target
            target.next('.clue').addClass('target');
            //remove target class from first clue with target class
            target.first('.clue').removeClass('target');
        }
    });

    $('.clue').click(function(){
        var $this = $(this);
        //defines the content of the clicked clue
        var letters = $this.html();
        if(letters != ''){
            //append content of clue to first anagram with empty class
            $('.anagram-letter.empty').first().append(letters);
            $this.html('');
            //remove empty class from that anagram
            $('.anagram-letter.empty').first().removeClass('empty');
            $('.clue').removeClass('target');
            $this.addClass('target');
            $this.removeClass('full');
        }
    });
});

Answer 3

我使用以下代码解决了这个问题：

if ($('.space-5').hasClass('full') && $('.space-4').hasClass('full') && $('.space-3').hasClass('full') && $('.space-2').hasClass('full') && $('.space-1').hasClass('full') == true) {
                    $('.anagram-letter').off('click');        
                }

使用jQuery创建anagram游戏

3 个答案: