Question

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

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

Answer 1

点击此链接http://api.jquery.com/category/selectors/ 你可以使用dom元素的id，class，name＆amp;许多其他人使用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函数

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

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

Answer 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">

Answer 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 cat设置皮肤的方法很多

输入按钮脚本与其他按钮冲突 - 如何使其独特？

3 个答案: