使用jQuery创建字谜游戏

我正在制作一个字谜游戏，它将字母从一组杂乱的字谜字母移动到一排空白的方块上，让玩家知道这个单词有多少个字母。我已经具备了基本的功能；当您单击任何字母时，它会跳转到第一个可用的空白磁贴，如果您在该磁贴中包含字母后单击该磁贴，它会将该字母发送回混乱列表中的第一个空白磁贴

我的问题是，如果填充了所有空白分幅，用户仍然可以单击混杂的字母，并且当前这会销毁该字母，因为它被发送到一个具有target类的div，该类仅在上面有空白分幅时存在

我已经尝试了几种方法来解决这个问题，我认为最好的方法是得到一个if语句来检查任何线索空间是否有target类-如果没有，那么就不要附加字母。我的另一个想法是在点击的字母和空白的瓦片之间切换HTML。< /P> 这是if语句

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

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

我好像没法让它工作。如果有任何帮助，我将不胜感激。过去两天我一直在做这件事。你可以在这里看到游戏：

---

（你可以看到我尝试过的所有不同的解决方案都被注释掉了）

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

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');        
                }

---

你可以试试api.jquery.com/attribute-contains-selector，这样你就可以使用

$（“.clue[class*='target']）

这将找到space-x，它有目标css类，而不需要在所有空间中循环。我意识到这个线程有点旧，但如果有人看到它并想要一个更精致的版本，那么你可以：

$(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');
        }
    });
});

---

您以错误的方式使用多个jQuery选择器。看到了吗？谢谢，我能理解其中的逻辑，但它并没有完全解决，信件仍在被销毁。我尝试在第一个if语句下面添加这个if语句，但是仍然没有任何乐趣

if（$（'.space-5'&&&&'.space-4'&&&&&'.space-3'&&&'.space-2'&&&&'.space-1'）。hasClass（'full'））{$（'.anagram letter'）。单击（函数（）{return false；}）；}

我也尝试了

$（'.anagram-letter'）。关闭（'click'）

而不是

返回false如果您尝试$（'.space-1、.space-2、space-3…）。如果这些选择器中的任何一个具有“target”类，hasClass（'target'）将返回true。尝试使用多个选择器的正确方式。在选择器中不能像您使用的那样使用| |或&&运算符。好的，检查每个函数是否比检查每个函数更好？类似这样：
var k=0；var full=$（'.clue'）.each（函数（）{$（'.clue'）.hasClass（'target'）；k++；if（full==true）{$（'.anagram letter'）.off（'click'）；}）您可以尝试使用$（“.clue[class*='target']”）。这将找到包含目标css类的空间，而不会在所有空间中循环。如果您使JSFIDLE变得简单，我可能会帮助您获得解决方案。无法通过fiddle上的整个JS的逻辑。如果你有空格-0到空格-1000xxx:），那么你需要使用each循环来检查每个空格，但是因为我只有5个空格，所以这个解决方案有效