Javascript 输入按钮脚本与其他按钮冲突-如何使其唯一？

我有许多按钮在一种形式。我为几个特定的按钮编写了一个脚本，现在我的其他按钮无法正常工作

是否可以使我的按钮脚本仅对指定的按钮唯一，以避免与其他按钮冲突？当我只想将“input[type='button']”应用于脚本中的几个按钮时，它似乎适用于表单中的所有按钮

以下是我希望修改的脚本，仅适用于几个特定按钮：

$(document).ready(function(){
   $(function() {
      var $buttons = $("input[type='button']");
      $buttons.click(function() {

      $(this).parent().siblings('.bx, #bxGender .gender').css({'background':'#2F2F2F','color':'#fff'});
    $buttons.not(this).removeClass('button-toggle-on');
    $(this).toggleClass('button-toggle-on').attr('style','');

    var varval = '';
    if ($(this).hasClass('button-toggle-on')) {
        varval = $(this).hasClass('gnF') ? 'Female' : 'Male';
        $(this).siblings('input[type="button"]').css('background-position','0 -180px');
    }
    else {
          $(this).siblings('input[type="button"]').attr('style','');
       $(this).parent().siblings('.bx').attr('style','');
    }
    $("#gender").val(varval);
 });});
 });



 <input type="button" class="gnM" >
 <input type="button" class="gnF">
 <input class="req-string gender" id="gender" name="gender">

$（文档）.ready（函数（）{
$（函数（）{
变量$buttons=$（“输入[type='button']”）；
$按钮。单击（函数（）{
$（this.parent（）.sides（'.bx，#bxGender.gender'）.css（{'background'：'#2f2f'，'color'：'#fff'）；
$buttons.not（this.removeClass（'button-toggle-on'）；
$（this.toggleClass（'button-toggle-on'）.attr（'style'，''）；
var varval=''；
if（$（this）.hasClass（'button-toggle-on'））{
varval=$（this.hasClass（'gnF'）？'Female'：'Male'；
$（this）.sides（'input[type=“button”]）.css（'background-position'，'0-180px'）；
}
否则{
$（this）.sides（'input[type=“button”]”）.attr（'style'，''）；
$（this.parent（）.sides（'.bx'）.attr（'style'，''）；
}
$（“#性别”）.val（varval）；
});});
});

像这样吗？下面是一个使用类仅影响某些元素的示例

$(document).ready(function(){
    $(function() {
        $(".special-button").click(function() {

            $(this).parent().siblings('.bx, #bxGender.gender').css({'background':'#2F2F2F','color':'#fff'});
            $(this).siblings('.special-button').removeClass('button-toggle-on');
            $(this).toggleClass('button-toggle-on').attr('style','');

            var varval = '';
            if ($(this).hasClass('button-toggle-on')) {
                varval = $(this).hasClass('gnF') ? 'Female' : 'Male';
                $(this).siblings('.special-button').css('background-position','0 -180px');
            }
            else {
                $(this).siblings('.special-button').attr('style','');
                $(this).parent().siblings('.bx').attr('style','');
            }
            $("#gender").val(varval);
        });
    });
});

 <input type="button" class="gnM special-button" >
 <input type="button" class="gnF special-button">
 <input class="req-string gender" id="gender" name="gender">

$（文档）.ready（函数（）{
$（函数（）{
$（“.special按钮”）。单击（函数（）{
$（this.parent（）.sides（'.bx，#bxGender.gender'）.css（{'background'：'#2f2f'，'color'：'#fff'）；
$（this）.sides（'.special button'）.removeClass（'button-toggle-on'）；
$（this.toggleClass（'button-toggle-on'）.attr（'style'，''）；
var varval=''；
if（$（this）.hasClass（'button-toggle-on'））{
varval=$（this.hasClass（'gnF'）？'Female'：'Male'；
$（this）.sides（'.special button'）.css（'background-position'，'0-180px'）；
}
否则{
$（this.sides（'.special button'）.attr（'style'，''）；
$（this.parent（）.sides（'.bx'）.attr（'style'，''）；
}
$（“#性别”）.val（varval）；
});
});
});

检查此链接 您可以使用dom元素的id、类、名称和其他许多元素来使用jquery选择元素

因此，要将选择范围缩小到希望更好地使用相同类属性的按钮

例：

HTML:

然后使用jquery

$（'.mine'）。单击（）或$（'.mine'）。添加类

或任何您希望使用的有效jquery函数

即使有许多dom元素与选择器属性匹配，jQuery也会返回适当的

这个
属性[这里有两个按钮具有相同的类]

一个完整的例子：
或者如果您仍然希望在一个方法中包含所有按钮处理程序，但目标特定的方法除外：

$( document ).ready( function(){
  $( "input[type='button']" ).click( function( e ){
    var $this = $( this );
    switch( true ){
      case $this.hasClassName( "special-button" ):
        //do some stuff
      break;
      case $this.attr("name") === "gender":
        //do something else
      break;
      default:
        //catch all other cases
     }
   });
 });

有很多方法可以给javascript猫蒙皮
您是正确的，
input[type='button']
将选择所有按钮。您需要使用jQuery选择器缩小选择范围，例如按类、按id、按属性等进行选择。您可以将类添加到按钮组中，并使用“.”选择器，例如$（“.group1”）。单击（函数（）…有没有一个例子我可以看到，因为我仍然是一个脚本新手？这帮助我理解。学到了一些新的东西。非常感谢。
$( document ).ready( function(){
  $( "input[type='button']" ).click( function( e ){
    var $this = $( this );
    switch( true ){
      case $this.hasClassName( "special-button" ):
        //do some stuff
      break;
      case $this.attr("name") === "gender":
        //do something else
      break;
      default:
        //catch all other cases
     }
   });
 });