0

在我的脚本中单击“按钮”时，它会返回一个图像文件（“#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++;
}
});
4

3 回答 3

0

添加计数器：

var i = 0;

然后：

i++;

不要忘记检查它:)

if(i == 3)
于 2012-08-02T09:22:55.280 回答
0 
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');

});
于 2012-08-02T09:26:59.277 回答
0

使用 jQuery 的.data() 函数跟踪按钮被按下的次数。您将设置一个计数器，然后递增，当它达到 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 的代码，有几件事需要修复。值得注意的是，您似乎将输入的“类型”属性与 id 混淆了。每个 id 只能使用一次，您使用 pickNext 两次。那会破坏各种事情。您还使用了一种无效的“button2”类型。您的 $('button') 和 $('button2') 点击事件不会像您预期的那样工作，因为它们正在寻找带有 and 标记的元素。因此，任何时候按下任何按钮都会触发第一个事件，而第二个永远不会。$('#pickNext') 点击事件，因为您使用了两次pickNext，可能只会触发第二个按钮。你可能应该给他们“pickNext”和“reset”的ID，

Long story short: get the rest of your code working, and then worry about getting things to happen three times.

于 2012-08-02T09:28:20.540 回答