0

1 つのフォームに多くのボタンがあります。いくつかの特定のボタンに対して 1 つのスクリプトを作成しましたが、他のボタンが正しく機能しません。

他のボタンとの競合を避けて、指定されたボタンのみに対してボタン スクリプトを一意にすることはできますか? "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">
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関数

セレクター属性に一致する dom 要素が多数ある場合でも、jQuery は適切なthis属性を返します [ここでは、同じクラスのボタンが 2 つあります]。

完全な例: http://jsfiddle.net/AEkbh/2/

于 2012-04-14T16:33:19.547 に答える
0

または、すべてのボタンハンドラーを1つのメソッドに含めたいが、特定のメソッドをターゲットにしたい場合は、次のようにします。

$( 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 に答える
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 に答える