4

На сей раз возник вопрос к var. Как заставить переменную перезаписывать своё значение при каждом новом вызове функции? Весь код функции прилагается.

function tablecell(){
    var st = $(this).attr('id');
    console.log(st);
    if($(this).is('.disabled')){ 
    }
    else{
        $('.questionBg').css({'display':'flex'});
        function answer(){
            if ($(this).is('#true')){
                $(this).css({'background':'#83c849'}).css({'color':'#fff'});
                $('.answer').addClass('disabled');
                $('.disabled').off('click', answer);
                $('.teamSelection').css({'display':'flex'});
                $('.selectTeam').click(function(){
                    $(close);
                    alert(st);
                    $("#"+st).addClass('disabled');
                    if($(this).is('.selectTeam1')){
                        $("#"+st).children('.question').css({'display':'none'});
                        $("#"+st).children('.team1').css({'display':'block'});
                    }
                    else{
                        $("#"+st).children('.question').css({'display':'none'});
                        $("#"+st).children('.team2').css({'display':'block'});
                    }
                });
            }
            else{
                $(this).css({'background':'#e03a3a'}).css({'color':'#fff'});
                $('.answer').addClass('disabled');
                $('.disabled').off('click', answer);
                setTimeout(close, 1000);
            }
        }
    }
    $('.answer').click(answer);
};

Вызов производится извне:

$(document).ready(function(){
    $('.tablecell').click(tablecell);
});

У меня ощущение, что функция банально не завершается, но новое значение в консоль при повторном вызове выводится. Однако, alert с каждым разом повторно выводит предыдущие значения. Что делать - не пойму. Массивом прописать?

    <div class="questionBg">
        <div class="questionBlock">
            <div class="questionText">
                <img src="image/question.png">
                    Какого цвета этот блок?
            </div>
            <ul class="answersContainer">
                Варианты ответа:
                <li class="answer">Синий</li>
                <li class="answer">Красный</li>
                <li class="answer">Серый</li>
                <li class="answer" id="true">Белый</li>
            </ul>
            <div class="teamSelection">
                <div class="selectTeam selectTeam1">
                    <img src="image/team1.png">
                </div>
                <div class="selectTeam selectTeam2">
                    <img src="image/team2.png">
                </div>
            </div>
            <div class="close">
                <img src="icons/cross.png">
            </div>
        </div>
    </div>
    <section>
        <div class="start">
            Начать!
        </div>
        <div class="table">
            <div class="tablecell" id="1">  
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="2">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="3">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="4">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="5">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="6">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="7">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
            <div class="tablecell" id="8">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">  
            </div>
            <div class="tablecell" id="9">
                <img class="question" src="image/question.png">
                <img class="team team1"src="image/team1.png">
                <img class="team team2" src="image/team2.png">
            </div>
        </div>
    </section>

1 ответ 1

6

Что делать

Не назначать обработчики событий внутри других обработчиков событий.

Каждый раз, когда выполняется функция tablecell, Вы добавляете новый обработчик события click всем элементам с классом "answer". По щелчку на такой элемент выполняются все накопившиеся обработчики.

(function(){
  var st;

  function answer(){
    ...
  }

  function tablecell(){
    st = $(this).attr('id');
    console.log(st);
    if($(this).is('.disabled')){ 
    } else {
      $('.questionBg').css({'display':'flex'});
    }
  }

  $(document).on('click', '.tablecell', tablecell);
  $(document).on('click', '.answer', answer);
})();
8
  • Мне бы тогда понять, как использовать переменную из одной функции внутри другой, если обе они завязаны на обработке событий
    – vo1d
    14 ноя 2017 в 19:56
  • @Дмитрий У Вас, вероятно, существует некоторая связь между элементами .tablecell и наборами элементов .answer. По какой-то причине Вы решили не включать в Ваш вопрос html разметку, из которой можно было бы эту связь уяснить.
    – user176262
    14 ноя 2017 в 20:00
  • добавил html разметку. Для полноты картины, могу загрузить весь макет на cssdeck.
    – vo1d
    14 ноя 2017 в 20:06
  • @Дмитрий Перенес декларацию переменной st.
    – user176262
    14 ноя 2017 в 20:13
  • 2
    $(document).ready и $(document).on('click' - один из этих двух механизмов тут лишний. 15 ноя 2017 в 7:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.