1

HTMLページに次のボタンがあります。

<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>

以下は、buttonClassA を記述した css ファイルです。

.buttonClassA
{
    display: block; width:auto; height:auto; padding:5px; margin-top:10px;

    background: #398525; /* old browsers */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 10px;

    font:26px times-new-roman; 
    text-align: center;
    text-decoration: none;
    color: #147032;
    text-shadow: 0px 1px 2px #b4d1ad;

    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

私の要件：ボタンをクリックすると、その背景が変わるはずです。

どうすればいいですか？背景色を変更し、他のすべてのものを buttonClassA からコピーする別のクラス buttonClassB を作成する必要がありますか? これがアプローチである場合、ボタンがクリックされたときに実行時にボタンのクラスを変更するにはどうすればよいですか? 提案してください？

4

10 に答える 10

3

別のクラスを使用できます：

function myFunction () {
  $(this).toggleClass('buttonClassB');
};
.buttonClassB {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction.call(this)">Click me</button>

style 属性を使用することもできます:

function myFunction () {
    $(this).css('background', 'red');
    // <button style="background:red">
};

リンク :

于 2013-10-19T07:39:34.780 に答える
3

はい、jquery を使用してクラスを追加/削除できます

$(document).ready(function () {        
        $("#button1,#button2,#button3,#button4").live("click", function () {
            $(this).removeClass("buttonClassA");
            $(this).addClass("buttonClassB");
        });
    });
于 2013-10-19T07:43:37.610 に答える
2

jQuery では、これを実行して実際のクラスを削除し、別のクラスを要素に割り当てることができます。

$(document).ready(function(){
    $('.buttonClassA').click(function(){
       $(this).removeClass('buttonClassA').addClass('buttonClassB');
    });
});

css 内に .buttonClassb という別のクラスを配置します

buttonClassB
{
    /*your style*/
}
于 2013-10-19T07:40:07.060 に答える
1

バックグラウンド用に別のクラスを作成することをお勧めします。次に、インライン スクリプトを削除して、次のようなものを使用できます。

$('.buttonClassB').click(function(){
     $(this).addClass('buttonClassB');
});

クリックすると元に戻りたい場合は、toggleClass('buttonClassB')を使用できます。

于 2013-10-19T07:39:14.327 に答える
1

代わりにonclick=myFunction()、次の JS コードを使用します。

onclick="this.className=''; this.style.backgroundColor='gray';

新しいスタイルを定義するために CSS をあまり必要としない場合は、スタイル属性の一部 (この場合はbackground-color) を変更するだけで、JS を使用してそれを制御できます。

于 2013-10-19T07:51:39.537 に答える
1

どうすればいいですか？背景色を変更し、他のすべてのものを buttonClassA からコピーする別のクラス buttonClassB を作成する必要がありますか? これがアプローチである場合、ボタンがクリックされたときに実行時にボタンのクラスを変更するにはどうすればよいですか? 提案してください？

すべてをコピーする必要はありません。変更したい CSS プロパティを追加するだけです。残りは継承されます。だから、背景だけを言いましょう：

.buttonClassB {
    background: #398525; /* old browsers */
    background: linear-gradient(to bottom, #8DD297, #398525); /* standard */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* old firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
 }

また、コードでプレフィックスなしの標準値を使用することをお勧めします。Firefox など、一部のブラウザーには既にそれらがあります。

次に、ボタンがクリックされたときにクラスを簡単に切り替えることができます。同じボタンが再度クリックされたときにクラスを削除するかどうかによって異なります。addClassまたはを使用する必要がありますtoggleClass。

$(".buttonClassA").on("click", function() {
    $(this).toggleClass("buttonClassB");
});

変更をトグルするのではなく永続的にしたい場合は、に置き換えtoggleClassてください。addClass

于 2013-10-19T07:54:06.563 に答える
1

あなたはこのようにすることができます

実際のデモ: http://jsfiddle.net/J68sp/

$('button').on('click', function(){
    var btn=$(this);
    if(btn.attr('class')=='buttonClassA'){

         btn.removeClass('buttonClassA').addClass('buttonClassB');
    }
    else{
        btn.removeClass('buttonClassB').addClass('buttonClassA');
    }

})
于 2013-10-19T07:55:18.203 に答える