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

【问题标题】：Input button script conflicting with other buttons - How to make unique?输入按钮脚本与其他按钮冲突 - 如何使唯一？
【发布时间】：2012-04-14 16:10:31
【问题描述】：

我在一个表单中有很多按钮。我为几个特定按钮制作了一个脚本，现在我的其他按钮无法正常工作。

是否可以使我的按钮脚本仅针对指定的按钮是唯一的，以避免与其他按钮发生冲突？它似乎“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">

【问题讨论】：

input[type='button'] 将选择所有按钮是正确的。您需要使用 jQuery 选择器来缩小选择范围，例如按类、按 id、按属性等选择。
您可以将类添加到按钮组并使用“.”选择器，例如。 $(".group1").click(function()...
能否举个例子，因为我还是个脚本新手？

标签： javascript jquery button input click

【解决方案1】：

查看此链接http://api.jquery.com/category/selectors/ 您可以使用 dom 元素的 id、类、名称和许多其他元素来使用 jquery 选择元素。

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

例如：

HTML：

<input type='button' class='mine' value='hai' />
<input type='button' class='not-mine' value='hai' />
<input type='button' class='not-mine' value='hai' />
<input type='button' class='mine' value='hai' />

然后使用jquery

$('.mine').click() or $('.mine').addClass 或您希望使用的任何有效 jquery 函数

即使有许多 dom 元素与您的选择器属性匹配，jQuery 也会返回正确的 this 属性[这里有 2 个具有相同类的按钮]。

一个完整的例子： http://jsfiddle.net/AEkbh/2/

【讨论】：

【解决方案2】：

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

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

【讨论】：

这帮助我理解了。学到了一些新东西。非常感谢。

【解决方案3】：

或者，如果您仍想在一种方法中包含所有按钮处理程序但针对特定的处理程序：

$( 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猫换皮的方法有很多

【讨论】：