2013-09-18 3 views
0

Я создал замок, который открывается, когда вы нажимаете «777», и я хочу ограничить число кликов до 9. Как мне это сделать?Как ограничить число кликов до 9?

var numberOfClicks1 = 0; 
var numberOfClicks2 = 0; 
var numberOfClicks3 = 0; 

$('#clickme1').on('click', function() { 
    numberOfClicks1++; 
    $('#click-counter1').html(numberOfClicks1); 
}) 
$('#clickme2').on('click', function() { 
    numberOfClicks2++; 
    $('#click-counter2').html(numberOfClicks2); 
}) 
$('#clickme3').on('click', function() { 
    numberOfClicks3++; 
    $('#click-counter3').html(numberOfClicks3); 
}) 
$('#down-click1').on('click', function() { 
    numberOfClicks1--; 
    $('#click-counter1').html(numberOfClicks1); 
}) 
$('#down-click2').on('click', function() { 
    numberOfClicks2--; 
    $('#click-counter2').html(numberOfClicks2); 
}) 
$('#down-click3').on('click', function() { 
    numberOfClicks3--; 
    $('#click-counter3').html(numberOfClicks3); 
}) 
+0

Если вы ограничите количество кликов до 9, они никогда не смогут добраться до 777 при условии, что вы начнете с 111 – DGS

+0

Дайте нам вашу разметку HTML. – Alvaro

+0

Установить скрытое поле для «подсчета» кликов ... или js var – Eleazan

ответ

0

Если я угадал, у вас есть три поля, которые показывают число и +/- для каждого из полей. Вы можете просто выйти из функции, если ваши критерии соблюдены:

$('#clickme1').on('click', function() { 
    if (numberOfClicks1 >= 9) { 
     return true; 
    } 
    numberOfClicks1++; 
    $('#click-counter1').html(numberOfClicks1); 
}) 
+0

Спасибо DKsan, очень ваш ответ был очень приятным благодаря вашему времени! – alonblack

0
var numberOfClicks1 = 0; 
var numberOfClicks2 = 0; 
var numberOfClicks3 = 0; 

$('#clickme1').on('click', function() { 
    if (numberOfClicks1 < 9) { 
     numberOfClicks1++; 
     $('#click-counter1').html(numberOfClicks1); 
    } 
}) 
$('#clickme2').on('click', function() { 
    if (numberOfClicks2 < 9) { 
     numberOfClicks2++; 
     $('#click-counter2').html(numberOfClicks2); 
    } 
}) 
$('#clickme3').on('click', function() { 
    if (numberOfClicks3 < 9) { 
     numberOfClicks3++; 
     $('#click-counter3').html(numberOfClicks3); 
    } 
}) 
$('#down-click1').on('click', function() { 
    if (numberOfClicks1 > 0) { 
     numberOfClicks1--; 
     $('#click-counter1').html(numberOfClicks1); 
    } 
}) 
$('#down-click2').on('click', function() { 
    if (numberOfClicks2 > 0) { 
     numberOfClicks2--; 
     $('#click-counter2').html(numberOfClicks2); 
    } 
}) 
$('#down-click3').on('click', function() { 
    if (numberOfClicks3 > 0) { 
     numberOfClicks3--; 
     $('#click-counter3').html(numberOfClicks3); 
    } 
}) 

Кажется, я понял ваш вопрос. Измененный код теперь будет ограничивать ваши переменные numberOfClicks в пределах 0-9

+0

Это скорее всего неверно, потому что' #down -... 'являются' numberOfClicks. ..--; ', поэтому это должно быть' if (numberOfClicks ...> 1) {'в этих местах. –

+0

мой код был основан на предположении, что ОП хотел ограничить количество раз, когда пользователь изменил переменную, а не ограничил диапазон. 'numberOfClicks' был ++ в моем коде для всех обработчиков событий click – DGS

0

вы coud просто использовать, если():

$('#clickme1').on('click', function() { 
    if(numberOfClicks1<9){ 
     numberOfClicks1++; 
     $('#click-counter1').html(numberOfClicks1); 
    } else { 
     alert("no more clicks"); 
    }  
}) 

для предотвращения падения при 0:

$('#down-click1').on('click', function() { 
    if(numberOfClicks1<0){ 
     numberOfClicks1--; 
     $('#click-counter1').html(numberOfClicks1); 
    } 
}) 
0

Попробуйте это

$('[id^="clickme"]').on('click', function() { 
    var id = $('#click-counter' + this.id.match(/\d+/)); 
    var num = parseInt(id.text()); 
    num == 9 ? 9 : num++; 
    $(id).text(num); 
    var checkLock = $('[id^=click-counter]').map(function() { 
     return this.textContent 
    }); 
    if (checkLock[0] == "7" && checkLock[1] == "7" && checkLock[2] == "7") { 
     alert("opened"); 
    } 
}); 

$('[id^="down-click"]').on('click', function() { 
    var id = $('#click-counter' + this.id.match(/\d+/)); 
    var num = parseInt(id.text()); 
    num == 0 ? 0 : num--; 
    $(id).text(num); 
    var checkLock = $('[id^=click-counter]').map(function() { 
     return this.textContent 
    }); 
    if (checkLock[0] == "7" && checkLock[1] == "7" && checkLock[2] == "7") { 
     alert("opened"); 
    } 
}); 

DEMO

+1

Почему вы пишете '$ (id)' в этом случае? 'id' уже представляет собой набор результатов jQuery, поэтому' id.text (num); 'уже работает. Также 'parseInt ($ ('# click-counter' + this.id.match (/ \ d + /)). Text());' может быть записано как 'parseInt (id.text());' и вы должны всегда указывайте основание. –

+0

Я не писал 'parseInt (this.id)', я написал 'parseInt (id.text())'. –

+0

@ t.niese вы правы, писал это как можно быстрее :) – Anton

Смежные вопросы