Question

我有一个名为showHide（）的函数，当单击另一个按钮（button1）时，它交替显示和隐藏文本输入字段和按钮（button2）。文本输入字段在打开时会自动聚焦，这很有用。

HTML大致如此：

<button1>Show/Hide</button>
<form>
  <input class="hidden" type="text" />
  <button2 type="submit">Submit</button>
</form>

<script type="text/javascript">
  $("button1.someSelectors").click(function() {showHide();});
  $("input.someSelectors").blur(function() {showHide();})
</script>

我想扩展这个函数，当输入字段失去焦点时它和button1消失，除非因为点击button1而失去焦点。正如它现在所读，我只测试输入字段是否有焦点。我怎样才能检查是否点击了button2？

我试过了：

$("input.someSelectors").blur(function() {
  if (!$("button2.someSelectors").is(":focus")) {
    showHide();
  }
});

但即使我尝试点击button2，它也会隐藏表单元素。

另一种方法是测试函数的“隐藏”部分是否点击了button2，但是当我添加

时

if(!$("button2.someSelectors").click()) {do the hide part of the function}

showHide（），当我点击button1 或 button2时，表单已提交。这是我问题的example。有人可以帮忙吗？

- 编辑：

var showHide=function(item, category) {
  if($("input."+item+"."+category).hasClass("hidden")) {
    $("input."+item+"."+category).show("fast").focus().removeClass("hidden");
    $("button.buy."+item+"."+category).show("fast");
    $("button.purchase."+item+"."+category).text("Never mind!");
  } else {
    $("input."+item).hide("fast").addClass("hidden");
    $("button.buy."+item).hide("fast");
    $("button.purchase."+item).text("Purchase");
  }
}

Answer 1

blur上的textbox事件在click事件触发按钮之前触发。为了避免这种情况，您可以使用mousedown事件代替click事件，该事件将在click事件之前触发。试试这个

 $("button1.someSelectors").mousedown(function() {showHide();});
 $("input.someSelectors").blur(function() {showHide();})

在element.blur（）上运行函数之前测试是否单击了按钮

1 个答案: