0

div の CSS プロパティを切り替えることができるコードを記述しようとしています。基本的に、通常の状態とアクティブな状態を持つボタンを作成しようとしています。

通常は青色ですが、クリックすると緑色になります。もう一度クリックすると、青色に戻ります。

CSS:

    .lblue{
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
          0 -1px 1px #666, /*top external shadow*/ 
          inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
          inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
        font-size: 16pt;
        padding: 5px;
        margin: 5px;
        color: white;
        background: #4bc2d3; /* Old browsers */
        background: -moz-linear-gradient(top,  #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4bc2d3 0%,#70d6e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */
        font-family: OpenSans-Semibold;
        float: left;
        }


        .lgreen{
            -moz-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
              0 -1px 1px #666, /*top external shadow*/ 
              inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
              inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
            font-size: 16pt;
            padding: 5px;
            margin: 5px;
            color: white;
            background: #7ebb44; /* Old browsers */
            background: -moz-linear-gradient(top,  #7ebb44 0%, #a5d063 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ebb44), color-stop(100%,#a5d063)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #7ebb44 0%,#a5d063 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ebb44', endColorstr='#a5d063',GradientType=0 ); /* IE6-9 */
            font-family: OpenSans-Semibold;
            float: left;
            }

HTML:

 <div class="lblue">Soul</div>

JS:

        $('.lblue').click(function() {
          $('.lblue').toggle(function() {
            $('.lblue').addClass('lgreen');

          });
        });

私のコードの問題は、何らかの理由でボタンをクリックすると、ボタンがスライドしているかのように消えてしまうことです。

4

5 に答える 5

2

残りの回答には同意できません。それらは正しいですが、意味的には正しくないように見えますが、要素のクラスにはlblueとlgreenクラス名の両方が含まれます。

<div class="lblue lgreen">Soul</div>
            ^^^^^^^^^^^^-- this is bad

また、CSS で定義されたクラス名の順序に依存します。

将来の問題を回避し、表示される内容と DOM にある内容に対して意味的に正しい を使用します。

$(document).on("click", ".lblue, .lgreen", function(){
  $(this).toggleClass("lblue lgreen");
});​

すべての要素の初期状態が青色の場合:

$(".lblue").click(function(){
  $(this).toggleClass("lblue lgreen");
});​

前者は動的に追加された要素に対して機能しますが、後者は機能しません。

見てみな。

于 2012-12-16T12:19:15.427 に答える
2

http://api.jquery.com/toggle/

トグル メソッドは、呼び出しごとに要素を表示/非表示にします。

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});
于 2012-12-16T12:01:07.700 に答える
0

色を確認してイベントを行うことができると思います。

例えば。）

あなたの場合のように：初期色=青。変換された色=緑

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});

ただ私の推測。あなたが何を探しているのか、私にはよくわかりません。

于 2012-12-16T13:15:18.530 に答える
0

使い方が.toggle()間違っていました。

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});
于 2012-12-16T12:03:59.897 に答える
0

プレーンな JavaScript では、classList を使用できます トグル https://developer.mozilla.org/en-US/docs/DOM/element.classList

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
alert(div.classList.contains("foo"));

あなたの場合：（変更する要素が1つだけであると仮定します。querySelectorAllおよびgetElementsByClassNameも参照してください）

document.querySelector('.lblue').classList.toggle('lgreen');

これは非常に新しい機能なので、ブラウザーの互換性についてはhttp://caniuse.com/classlistを参照してください。

于 2012-12-16T12:04:27.247 に答える