Изменить функцию onclick при вызове базы в классе

Question

У меня 6 кнопок. Первые 3 относятся к классу f-click, а все кнопки принадлежат s-click. Сначала я хочу запустить functionOne, вызвав f-click. Затем быстро следует отключить, чтобы снова вызвать onclick f-click и вы хотите, чтобы вызов onclick с использованием класса s-click. Мои условия приведены ниже. В качестве примера, если кнопки - 1 2 3 4 5 6.

1. Я хочу получить сообщение как «ваш в ..» при нажатии кнопки 1, 2 или 3.
2. 4,5,6 не следует вызывать до тех пор, пока не появится сообщение "your in .."
3. if message "your in .." Я хочу, чтобы значение кнопки вызова было таким, как "your clik on" + button_value . (От 1 до 6)
4. не следует получать сообщение «ваш в ..» 2 раза.

как это сделать, и мой код следующий,

<button type="button" id="b_1" value="0" class="f-click s-click btn" name="button"></button>
<button type="button" id="b_2" value="1" class="f-click s-click btn" name="button"></button>
<button type="button" id="b_3" value="2" class="f-click s-click btn" name="button"></button>
<button type="button" id="b_4" value="3" class="s-click btn" name="button"></button>
<button type="button" id="b_5" value="4" class="s-click btn" name="button"></button>
<button type="button" id="b_6" value="5" class="s-click btn" name="button"></button>

Это мой jquery код,

$(".f-click").on('click', function() {
 firstFunction()
 secondFunction();
});

function firstFunction() {
 $(".f-click").prop("disabled", true);
 console.log("Your In");
 }

function secondFunction() {
 $(".s-click").prop("disabled", false);
 var selected_button = $(this).val();

 $(".s-click").on('click', function() {
 console.log("Your click on : "+selected_button);
 });
}

Но он не работает, потому что вторая функция снова работает с первой функцией, что я хочу сделать.

Answer 1

Здесь несколько проблем:

1. Внутри firstFunction() вы вызываете $(".f-click").prop("disabled", true);, но снова внутри secondFunction() вы вызываете $(".s-click").prop("disabled", false); и, поскольку все 6 кнопок имеют этот класс, поэтому .f-click кнопки никогда не отключаются.

2. Это можно исправить, не включив .f-click кнопки на .s-click отключить, например:

   $(".s-click:not(.f-click)").prop("disabled", false);
   

3. Кроме того, внутри secondFunction() вы назначаете обработчик событий click кнопкам .s-click несколько раз. Таким образом, при первом нажатии отображается 1 журнал консоли, затем 2 и так далее. Чтобы решить эту проблему, вы должны поместить обработчик событий click для кнопок .s-click за пределы secondFunction() и просто вызвать щелчок, например:

   $(".s-click").click();
   

$(document).on('click', '.f-click', function() {
  firstFunction(this)
});

$(document).on('click', '.s-click:not(.f-click)', function() {
  secondFunction();
});

function firstFunction(obj) {
  $(obj).removeClass('f-click')
  console.log("this is 1st function");
}

function secondFunction() {
  console.log("this is 2nd function");
}

.btn { padding: 4px 15px;  margin: 4px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="b_1" value="0" class="f-click s-click btn" name="button">1</button>
<button type="button" id="b_2" value="1" class="f-click s-click btn" name="button">2</button>
<button type="button" id="b_3" value="2" class="f-click s-click btn" name="button">3</button>
<button type="button" id="b_4" value="3" class="s-click btn" name="button">4</button>
<button type="button" id="b_5" value="4" class="s-click btn" name="button">5</button>
<button type="button" id="b_6" value="5" class="s-click btn" name="button">6</button>

Answer 2

переместите это:

$(".s-click").on('click', function() {
 console.log("this is 2nd function");
 });

за пределы

function secondFunction() {

затем вызовите .off () перед .on для каждого обработчика события клика

$(".f-click").off().on('click', function

. .. а также для другого обработчика кликов