0

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

是否可以使我的按钮脚本仅针对指定的按钮是唯一的，以避免与其他按钮发生冲突？当我只希望它应用于脚本中的几个按钮时，它似乎适用于表单中的所有按钮。

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

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

3 回答 3

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 函数

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

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

于 2012-04-14T16:33:19.547 回答
0

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

$(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">
于 2012-04-14T16:26:08.930 回答
0

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

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

于 2012-04-14T16:38:22.677 回答