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

时间:2012-08-02 09:16:15

标签: javascript jquery

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

3 个答案:

答案 0 :(得分:0)

添加计数器:

var i = 0;

以后:

i++;

不要忘记检查它:)

if(i == 3)

答案 1 :(得分: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');

});

答案 2 :(得分:0)

使用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,然后为您的点击事件引用这些选择器。

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