0

ボタンをクリックするたびに使用しているボタンのスタイルを変更し、一緒にテキストを変更したかったのです。問題は、構文にあまり詳しくない外部JavaScriptを使用してそれを実行したかったことです。私がやりたかったことを詳しく説明することは、次のようなテキストを表示するボタンを作成することです：非常に良い、良い、中程度、失敗。各テキストには、CSSを使用して独自に割り当てられたグラデーションの色があります。たとえば、緑は非常に良い、黄色は良い、オレンジは中程度、赤は失敗のグラデーションです。それを検索しようとしましたが、私は無関係な投稿にたどり着きました。私が思うに、クリック時にボタンを作成する必要があり、クリックするたびにjavascriptは0からint値を追加し、3に達すると0にリセットされます。this.style="failed"これが可能かどうかはわかりません。

更新：いくつかの調査を行った後、テキストの変更（javascriptのみを使用）について何かを行うことができましたが、クラスはjavascriptのキーワードであると思うので、まだクラスの部分はありません。これまでの私のスクリプトは次のとおりです。

    function buttonChange(){
    var button = document.getElementById("stats");
    switch (button.value)
    {
      case "Very Good":
      button.value="Good";
      break;
      case "Good":
      button.value="Moderate";
      break;
      case "Moderate":
      button.value="Failed";
      break;
      default:
      button.value="Very Good";
    }       
}

今問題はスタイルです。:)

4

3 に答える 3

1

jQueryを使用すると、コードは次のようになります。

var values = new Array('Very Good', 'Good', 'Moderate', 'Failed');
var colors = new Array('lime', 'yellow', 'orange', 'red');

$('#rate').click(function() {

    // current index is stored in data attribute
    var idx = $(this).data('value') + 1;

    // last value was selected -> go back to first one
    if (idx >= values.length) {
        idx = 0;
    }

    // update data attribute with current index
    $(this).data('value', idx);

    // update button text
    $(this).val(values[idx]);

    // update button background color
    $(this).css('background-color', colors[idx]);

});​

このFIDDLEを参照してください。

于 2012-10-30T09:44:12.740 に答える
0

これは、4つの状態のボタンテキストと背景色を循環するjQueryソリューションです。

<!doctype html>
<html>
 <head>
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function() {
    var states = ['Very Good', 'Good', 'Moderate', 'Failed'];
    var colors = ['green', 'Yellow', 'orange', 'red'];
    var index = 0;
    $('body').on('click', '#button', function(){
        index = ++index%4;
        $("#button").html(states[index]);
        $("#button").css('background-color',colors[index]);
    });
});
 </script>
 </head>
 <body>
    <button id="button" style="background-color:green"; type="button">Very Good</button>
 </body>
</html>

'index'の0から3への循環増分を単純化するモジュラス（％）演算子に注意してください。

于 2012-10-30T09:48:14.227 に答える
0

これを見てください： JavaScriptで要素のクラスを変更してください

CSSには、グラデーションなどのすべてのスタイルが必要だと思います。

.VeryGood {//gradient for very good
}
.Good {//gradient for good
}
.Moderate {//gradient for moderate
}
.Failed { //gradient for failed
}

次に、このjavascriptとhtmlを使用します。

<script type="text/javascript">
var i = 1; //change to 0 if element dosen't need to have any class by default
var classArray = new Array();
classArray[0] = 'VeryGood';
classArray[1] = 'Good';
classArray[2] = 'Moderate';
classArray[3] = 'Failed';
    function changeClass()
    {
        document.getElementById("MyElement").className = classArray[i];        
        i++;
        if(i>=3){
            i=0;
        }
    }
</script>
...
<button onclick="changeClass()">My Button</button>

現在、配列キーiはボタンがクリックされるたびに増加するため、デフォルトでは、要素のクラスをVeryGoodとして設定でき、ボタンがクリックされるたびに次のクラスに進むため、VeryGoodがGood、Moderate、Failedの順になります。それはVeryGoodにリセットされます。これがあなたが探しているものであることを願っています:)

于 2012-10-30T09:49:38.030 に答える