Question

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

问题是，我希望按钮重复其动作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++;
}
});

Answer 1

添加计数器：

var i = 0;

以后：

i++;

不要忘记检查它：）

if(i == 3)

Answer 2

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

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



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

});

Answer 3

使用jQuery的.data() function跟踪按下按钮的次数。你设置一个计数器，然后递增，当它达到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
}

如果我理解你的代码，它看起来像这样：

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

如果您愿意，这将允许您添加更多按钮，并且无论如何都是良好的编码习惯。也可以明智的做法是添加一个设置为'3'的'maxClicks'数据属性进行检查，以便您可以改变所需的点击次数。

查看你提供的jsFiddle代码，有几件事需要修复。值得注意的是，您似乎将输入的“type”属性与id混淆。每个id应该只使用一次，你使用pickNext两次。这将打破各种各样的事情。您还使用了一种无效的“button2”类型。你的$（'button'）和$（'button2'）点击事件将无法按预期工作，因为那些人正在寻找标记为和的元素。因此，任何按下任何按钮时都会触发第一个事件，第二个事件永远不会被激活。 $（'＃pickNext'）点击事件，因为您使用了两次pickNext，可能只会触发第二个按钮。您应该给他们“pickNext”和“reset”的id，然后为您的点击事件引用这些选择器。

长话短说：让你的其余代码工作，然后担心让事情发生三次。

每按3次点击按钮更改输出

3 个答案: