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 は 1 回だけ使用する必要があります。pickNext を 2 回使用しています。それは、ありとあらゆるものを壊してしまいます。また、有効ではないタイプの「button2」を使用しています。$('button') および $('button2') のクリック イベントは、 および のタグを持つ要素を探しているため、予想どおりには機能しません。したがって、最初のイベントはボタンが押されるたびに発生し、2 番目のイベントは決して発生しません。$('#pickNext') クリック イベントは、pickNext を 2 回使用しているため、おそらく 2 番目のボタンに対してのみ発生します。おそらく、「pickNext」と「reset」の ID を指定する必要があります。

簡単に言えば、コードの残りの部分を機能させてから、問題が発生することを 3 回心配します。

于 2012-08-02T09:28:20.540 に答える