调用基类时更改onclick函数

Question

我有 6 个按钮。前3个属于f-click类，所有按钮都属于s-click。首先，我想通过调用 f-click 来运行 functionOne。然后很快应该禁用再次调用 onclick f-click 并希望使用 s-click 类调用 onclick。 我的条件如下例如，如果按钮是 1 2 3 4 5 6。

1. 我想通过 onclick 1,2 或 3 获取“你的 in..”消息。
2. 4,5,6 不应该被调用，直到消息为“你的 in..”
3. 如果消息“your in..”我想调用按钮值，例如“your clik on”+button_value.(1 到 6)
4. 不应收到 2 次“your in..”消息。

我该怎么做，我的代码如下，

<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. 您可以通过在 .s-click 上禁用 .f-click 按钮来解决此问题，例如：

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

3. 此外，在secondFunction() 中，您将多次将click 事件处理程序分配给.s-click 按钮。因此，在第一次单击时，它会显示 1 个控制台日志，然后是 2 个，依此类推。要解决此问题，您应该将.s-click 按钮的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() {

然后为每个点击事件处理程序在 .on 之前调用 .off()

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

...以及您的其他点击处理程序