javascript - 按钮与同一网页上的另一个按钮重叠/冲突

Question

我的页面上有 2 个按钮。按钮 1 正在执行 JavaScript 函数，另一个按钮用于表单处理。问题是按钮 1 覆盖了按钮 2 的值和功能。

按钮 1(不在表单中)具有以下 html 代码:

<input id="show_hint" class="button" type="submit" value="Hint" onClick="location.href='#hint'" />

附加的 JavaScript 是:

// Button 1
$(function(){
  var count = 3,
      $btn = $('input[type="submit"]'); 
      $btn.val($btn.val()+' ('+count+')')

  $btn.click(function(){
      $btn.val($btn.val().replace(count,count-1));
      count--;
      $('#hintscore')
        .hide()
        .css({
            bottom: 30,
            left: 300,
            opacity: 1,
        })
        .show()
        .stop()
        .delay(200)  
        .animate({'bottom':75, opacity: 0},1000);

      if(count==0) {
            return !$btn.attr('disabled','disabled');
      }
  })
});

按钮 2(在表单中)具有以下 html 代码:

<input id="showmenu_win2" class="button" type="submit" value="Menu" />

附加的 JavaScript 是:

$('#form').submit(function() {
        $.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

所以这两者是相互冲突的，并且与 type="submit"有关。但我该如何解决这个问题呢？

非常感谢

Answer 1

你的 JS 的这一部分:

$btn = $('input[type="submit"]'); 

选择两个按钮，因此将为两个按钮附加相同的行为。

由于每个按钮都有一个 id，因此您可以通过 id 准确选择所需的按钮:

$btn = $("#show_hint");