選択したときにdivに色を追加する方法

私はユーザーが2つのボタン（男性または女性）の間で選択しなければならないこのjqueryスクリプトを持っています。

私のコードは柔軟ではありませんでした。ボタンがクリックされて色付けされている場合、他のものを選択したときにボタンを通常の色に戻すことはできません。

$(document).ready(function(){ 
    $('.man-btn').on('click', function() { 
     if($('.man-btn').hasClass('color')) { 
      $('.man-btn').css('background', 'pink'); 
     }else 
      $('.man-btn').css('background', '#25273e'); 
     }; 
    }); 

    $('.woman-btn').on('click', function() { 
     if($('.woman-btn').hasClass('color')) { 
      $('.woman-btn').css('background', 'pink'); 
     }else 
      $('.man-btn').css('background', '#25273e'); 
     }); 
    }); 
});

は、ここに私のhtmlです：

<div name="gender"> 
    <div class="man-btn color" value="1"> 
     <span>Man</span> 
     <div class="man" > 
      <i class="fa fa-male" aria-hidden="true"></i> 
     </div> 
    </div> 
    <div class="woman-btn color" value="2"> 
     <span>Woman</span> 
     <div class="woman"> 
      <i class="fa fa-female" aria-hidden="true"></i> 
     </div> 
    </div> 
</div>

私を助けてください！あなたの助けに感謝！

出典

2017-08-03 Kobe Bryan

1つの以上溶液で行く、私は構文エラーを取得しています： 'キャッチされないでSyntaxErrorを：欠落している） –

男ボタンをクリックすると、男だけでなく、両方のボタンのクラスを変更します。

女性ボタンをクリックすると、女性だけでなく、両方のボタンのクラスを変更します。

クラスを使用して色を変更します。あるクラスを削除し、別のクラスを追加します。

出典

2017-08-03 16:15:20 Jerinaw

list'引数はあなたが私にサンプルのplsを表示することができた後？だから私はいくつかの基盤を持つことができます –

@Alive to Dieはあなたに正しい例を与えます。 – Jerinaw

以下のようにそれを実行します -

例： -

$(document).ready(function(){ 
 
    $('.color').on('click', function() { // use the common class click event 
 
    var gender = $.trim($(this).children('span').text()); 
 
    console.log(gender); 
 
    $('.color').removeClass('pink'); 
 
    $(this).addClass('pink'); 
 
    }); 
 
});

.pink{ 
 
background :pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div name="gender"> 
 
    <div class="man-btn color" value="1"> 
 
    <span>Man</span> 
 
    <div class="man" > 
 
     <i class="fa fa-male" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
    <div class="woman-btn color" value="2"> 
 
    <span>Woman</span> 
 
    <div class="woman"> 
 
     <i class="fa fa-female" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-03 16:17:33

gotcha！手伝ってくれてどうもありがとう！そんなに感謝しています！ –

btw、私はこのコードが自分のフォームには役に立たないことに気付きました。純粋にjqueryの練習でした。 –

ボタンの値を取得する必要がありますので、次の手順に進むことができます。これはフォーム検証の一環です。 –

使用このコード：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
     $('.man-btn').on('click', function() { 
 
      if($('.man-btn').hasClass('color')) { 
 
       $('.man-btn').css('background', 'pink'); 
 
      }else{ 
 
       $('.man-btn').css('background', '#25273e'); 
 
      } 
 
     }); 
 

 
     $('.woman-btn').on('click', function() { 
 
      if($('.woman-btn').hasClass('color')) { 
 
       $('.woman-btn').css('background', 'pink'); 
 
      }else{ 
 
       $('.man-btn').css('background', '#25273e'); 
 
      } 
 
     }); 
 
    }); 
 
</script> 
 
</head> 
 
<body> 
 

 
<div name="gender"> 
 
    <div class="man-btn color" value="1"> 
 
    <span>Man</span> 
 
    <div class="man" > 
 
     <i class="fa fa-male" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
    <div class="woman-btn color" value="2"> 
 
    <span>Woman</span> 
 
    <div class="woman"> 
 
     <i class="fa fa-female" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

出典

2017-08-03 16:18:22

これはうまくいかず、自分の質問をコピー/ペーストしたように見えます。また、あなたはあなたの答えを説明しませんでした。 – SeanKendle

これを大幅に簡略化することができます。 1つのクラスをボタンクラス（gender）として使用し、クラスを使用して背景色を設定してください。いずれかのボタンをクリックするだけで、その後、$(this)にクラスを追加し、クラスgenderのすべてのインスタンスを削除します。

$(document).ready(function(){ 
 
\t $(".gender").on("click", function() { 
 
\t \t $(".pinkbg").removeClass("pinkbg"); 
 
\t \t $(this).addClass("pinkbg"); 
 
\t }); 
 
});

.pinkbg { 
 
    background: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div name="gender"> 
 
    <div class="gender man-btn color" value="1"> 
 
     <span>Man</span> 
 
     <div class="man" > 
 
      <i class="fa fa-male" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    <div class="gender woman-btn color" value="2"> 
 
     <span>Woman</span> 
 
     <div class="woman"> 
 
      <i class="fa fa-female" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-08-03 16:19:11 SeanKendle

をはるかに単純なクラスを切り替えると、CSSルールにスタイルを置くために：

$(document).ready(function() { 
 
    var $buttons = $('.man-btn, .woman-btn').on('click', function() { 
 
    var $btn = $(this) 
 
    $btn.toggleClass('color-pink', $btn.hasClass('color')); 
 
    // remove from other one 
 
    $buttons.not(this).removeClass('color-pink') 
 
    }); 
 
});

.color-pink { 
 
    background: pink 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div name="gender"> 
 
    <div class="man-btn color" value="1"> 
 
    <span>Man</span> 
 
    <div class="man"> 
 
     <i class="fa fa-male" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
    <div class="woman-btn color" value="2"> 
 
    <span>Woman</span> 
 
    <div class="woman"> 
 
     <i class="fa fa-female" aria-hidden="true"></i> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-03 16:23:16 charlietfl

それは動作していません –

私のデモには確かです。他の場所で動作していない場合は、何かが異なります – charlietfl

ここでは、あなたのJavaScriptを使用してhttps://jsfiddle.net/ma9hzLc1/

$(document).ready(function(){ 
 
    $('.color').on('click', function() { 
 
    $(this).addClass('pink').siblings('.color').removeClass('pink'); 
 
    }); 
 
});

.pink{ 
 
    background :pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="man-btn color" value="1"> 
 
    <span>Man</span> 
 
    <div class="man" > 
 
    <i class="fa fa-male" aria-hidden="true"></i> 
 
    </div> 
 
</div> 
 
<div class="woman-btn color" value="2"> 
 
    <span>Woman</span> 
 
    <div class="woman"> 
 
    <i class="fa fa-female" aria-hidden="true"></i> 
 
    </div> 
 
</div>

出典

2017-08-03 16:46:49 Shiladitya

選択したときにdivに色を追加する方法

答えて

関連する問題