Javascript 每单击三次，使按钮更改输出

在我的脚本中单击“按钮”时，它会返回一个图像文件（“mypic”）、一个声音文件（“mysoundclip”）和一个设置单词拼写样式的类（“picknet”）

问题是，我希望按钮在继续下一个图像、声音和风格之前重复它的动作3次。我该怎么做

$('#pickNext').click(function() {
// remove the class from all td's
$('td').removeClass('spellword');
// pick a random word
var r = rndWord;
while (r == rndWord) {
    rndWord = Math.floor(Math.random() * (listOfWords.length));
}
// apply class to all cells containing a letter from that word
$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');

});


var audio = $("#mysoundclip")[0];
var i  = 0;
$(".minibutton").click(function() {
var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist && i >= 3) {
    $('#pickNext').click();
    i = 0;
} else {

    $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
    audio.play();
    pic = $("#mypic").attr('src', listOfWords[rndWord].pic);
    pic.show();
    $i++;
}
});

添加计数器：

var i = 0;

后来：

i++;

别忘了检查：）

---

使用jQuery的命令跟踪按钮被按下的次数。设置一个计数器，然后递增，当它达到3时进行操作。基本纲要：

timesClicked = $(this).data('timesClicked');
if(!timesClicked) { timesClicked = 0 } //Allow for the first time
if(timesClicked < 3) {
  //Increment the counter
  $(this).data('timesClicked',timesClicked+1);
} else {
  $(this).data('timesClicked',0);
  //Do your action
}

timescacked=$（this）.data（'timescacked'）；
如果（！timesClicked）{timesClicked=0}//第一次允许
如果（单击时间<3）{
//递增计数器
$（this）.data（'timescacked'，timescacked+1）；
}否则{
$（此）.data（'timeclicked'，0）；
//行动起来
}

如果我理解您的代码，它将如下所示：

if (noExist) {
    $(this).data('timesClicked', 0);
    $(this).click();
} else {
    timesClicked = $(this).data('timesClicked');
    if(timesClicked < 3) {
        //Increment the counter
        $(this).data('timesClicked',timesClicked+1);
    } else {
        //Reset the counter and pick new things
        $(this).data('timesClicked',0);
        $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
        pic = $("#mypic").attr('src', listOfWords[rndWord].pic);
    }
    //Either way, play the sounds       
    audio.play();
    pic.show();
}

if（noExist）{
$（此）.data（'timeclicked'，0）；
$（此选项）。单击（）；
}否则{
timesClicked=$（this）.data（'timesClicked'）；
如果（单击时间<3）{
//递增计数器
$（this）.data（'timescacked'，timescacked+1）；
}否则{
//重置计数器并选择新事物
$（此）.data（'timeclicked'，0）；
$（“#mysoundclip”）.attr（'src'，listOfWords[rndWord].audio）；
pic=$（“#mypic”）.attr（'src'，listOfWords[rndWord].pic）；
}
//不管怎样，播放声音
音频播放（）；
pic.show（）；
}

这将允许您添加更多的按钮，如果你想，在任何情况下都是良好的编码实践。明智的做法是添加一个设置为“3”的“maxClicks”数据属性，以进行检查，这样您就可以更改它需要的单击次数

查看您构建JSFIDLE的代码，有几件事情需要修复。值得注意的是，您似乎混淆了输入的“type”属性和id。每个id只应使用一次，而pickNext则使用了两次。这将打破一切。您还使用了一种无效的“button2”。您的$（'button'）和$（'button2'）单击事件将不会像您预期的那样工作，因为它们正在查找带有和标记的元素。因此，第一个事件将在按下任何按钮时触发，第二个事件永远不会触发。由于您使用了两次pickNext，因此$（'#pickNext'）click事件可能只会为第二个按钮触发。您可能应该给他们“pickNext”和“reset”的id，然后为您的点击事件参考这些选择器

---

长话短说：让剩下的代码正常工作，然后担心事情会发生三次。

您可以将i设置为全局变量，并将“i==3”替换为“i%3==0”，以便它在#picknext函数中以3的倍数工作@Mantas Vaitkūnasyeap，别忘了重置i=0，或者像@lukas.pukenis写的那样做。请参阅我的补充内容。该页面上有一些内容被破坏，在清理之前，你无法让你的“点击三次”功能正常工作。但你仍然有按钮和按钮2事件，它们没有做你认为它们正在做的事情，并且具有重复的功能，如果你尝试进一步开发，它们将被破坏。根据我更好的判断，我已经尝试自己清理它并添加代码：但我建议您花一些时间去读一本关于Javascript/jQuery的好书，并仔细阅读它——这样您将为自己今后节省很多痛苦。Closer。但是$（'button'）事件将在按下任何按钮时触发，因为选择器没有#（id）或。（类）之前，仅按标记名进行选择。还有type=“button2”，它不是有效的输入类型。但他们是，所以他们不需要一个类型在第一位。现在，当你按下Next按钮时，两个事件都在运行——一次是因为它的id为pickNext，一次是因为它是一个button元素。你必须理解你的代码在做什么，然后才能正确地修复它，而你还没有完全做到。我明白你现在的意思，这是怎么回事@辛可德纳达

timesClicked = $(this).data('timesClicked');
if(!timesClicked) { timesClicked = 0 } //Allow for the first time
if(timesClicked < 3) {
  //Increment the counter
  $(this).data('timesClicked',timesClicked+1);
} else {
  $(this).data('timesClicked',0);
  //Do your action
}

if (noExist) {
    $(this).data('timesClicked', 0);
    $(this).click();
} else {
    timesClicked = $(this).data('timesClicked');
    if(timesClicked < 3) {
        //Increment the counter
        $(this).data('timesClicked',timesClicked+1);
    } else {
        //Reset the counter and pick new things
        $(this).data('timesClicked',0);
        $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
        pic = $("#mypic").attr('src', listOfWords[rndWord].pic);
    }
    //Either way, play the sounds       
    audio.play();
    pic.show();
}