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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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