时间戳

首页 > 解决方案 > 调用基类时更改onclick函数

jquery - 调用基类时更改onclick函数

问题描述

我有 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 不应该被调用，直到消息为“你的..”
  3. 如果消息“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);
 });
}

但它不起作用，因为第二个功能再次与第一个功能一起使用，我想要做什么。

标签： jqueryfunctiononclick

解决方案

这里有几个问题：

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

    $(".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>

推荐阅读