Jquery/Javascript 刷新 Click()答案

【问题标题】：Jquery/Javascript Refreshing Click()Jquery/Javascript 刷新 Click()
【发布时间】：2014-11-12 12:27:24
【问题描述】：

我正在创建一个简单的游戏，其中玩家通过单击 6 个不同颜色的方块创建 4 个颜色代码，稍后计算机玩家应该能够猜测玩家选择的内容，但这会在很久以后发生.无论如何，我遇到的问题是 click()。我想要这样，当您单击每个方块时，您单击哪个方块的结果以及顺序存储在一个数组中，该数组最终将成为玩家的 4 种颜色代码。到目前为止，信息似乎正在被存储，但不是您期望的方式。例如，如果我单击橙色方块，该信息将存储 4 次，因此如果我打印出数组内容，它将看起来像橙色、橙色、橙色、橙色。如果有任何意义，我希望每次点击时都重置它。如果我点击蓝色、紫色、橙色、绿色，然后打印出数组，它应该是蓝色、紫色、橙色、绿色。关于我做错了什么的任何想法？谢谢！

var colorSelection;
var playerCode = [];
$(document).ready(function() {

    $('div.codeOption').mouseenter(function() {

        $(this).fadeTo("fast", 0.5);
    });

    $('div.codeOption').mouseleave(function() {

        $(this).fadeTo("fast", 1);
    });

});

$('div.codeOption').click(function() {

    for (i = 0; i < 4; i++) {
        colorSelection = $(this).attr('id');
        playerCode[i] = colorSelection;
        alert(playerCode);
    }

});

【问题讨论】：

介意制作小提琴吗？

标签： javascript jquery jquery-ui click

【解决方案1】：

Working Fiddle Here

您正在循环 4 次并为每次点击设置相同的选择 4 次...您可能认为您必须遍历每一个并找出点击了哪一个，但是您的 jquery 点击和随后的 $ (this) 选择器负责为您点击哪个，因此无需循环...试试这个

var colorSelection;
var playerCode = [];
var clickCount = 0;

$(document).ready(function(){

  $('div.codeOption').mouseenter(function(){

    $(this).fadeTo("fast",0.5);    
        });

  $('div.codeOption').mouseleave(function(){

      $(this).fadeTo("fast",1);
  });



    $('div.codeOption').click(function(){

            colorSelection = $(this).attr('id');
            playerCode [clickCount] =  colorSelection;  
            alert(playerCode);
            clickCount++;

    });
});

【讨论】：

感谢 Seth、Aameer 和 ajmajmajma。 erikrunia 是正确的，尽管我正在尝试做。认为我必须遍历每个“点击”几乎也是我的推理路线，很高兴知道情况并非如此。我刚刚在 CodeAcademy 完成了 jquery 课程，所以我在这方面还是很新的，并且一般来说编码，所以这是一个很大的帮助。感谢所有帮助过我的人！

【解决方案2】：

$('div.codeOption').click(function(){
...
colorSelection = $(this).attr('id');
playerCode [i] =  colorSelection;  
...
});

您在侧 div.codeOption 中使用 $(this) ，它将始终指向已单击的特定 div。尝试使用 .each 之类的东西，它将为所有 div 执行此操作。尚未测试，但希望对您有所帮助。

$('div.codeOption').click(function(){
     $('div.codeOption').each(function(){
         //some code
     });
});

【讨论】：