1

内部ユーザーが個別にクリックできるボタンのテーブルを作成しています。背景を白から緑、赤に切り替えてから白に戻すことができるボタンが必要です....ユーザーは内部にあり、これがChromeでのみ機能することを指定できます。基本的な HTML5/CSS3 と Javascript に固執したいと思います。より手続き的であり、私のチーム (私たちは Web ページ開発者ではありません) がそれを維持できる可能性が高いからです。

ボタン要素は、テキストやその他の要素と同じようには機能しないようです。他の背景色を変更するコードを使用しましたが、要素がボタンの場合は機能しません。

私の2つの基本的なブロッキングの問題は次のとおりです。

  1. 私のコードが次の色を計算できるように、onClick() ルーチンで現在の背景色をどのように読み取るのですか?

    onClick() ルーチンの実行中または終了時に背景色が変わるように、Button 要素のスタイルまたはクラスをどのように変更しますか?

次のように、CSS ファイルで 3 つの異なる色スタイルを定義する例を見てきました。

.make-background-white { background-color: white}
.make-background-green { background-color: green}
.make-background-red   { background-color: red}

これらは、最初にボタンを描画するときに使用できます。しかし、onClick() ルーチンで現在の背景色を「読み取る」方法も、色を変更する方法もわかりません。

詳細

データベースから読み取って、店舗周辺のすべての郵便番号を距離順に並べ替えました。テキストとして郵便番号を含むボタンのテーブルを作成します。これは 40 ～ 600 個のボタンの範囲です。背景色は、割り当てられていない郵便番号 (白い背景) と割り当てられている郵便番号 (緑色の背景) を示しています。

場合によっては、ユーザーがいくつかの白い郵便番号をクリックして、そのコードを店舗に割り当てたいことを知らせる必要があります。

また、ユーザーがクリックして、半径 30、60、または 90 マイルの店舗に郵便番号を自動的に色付け/割り当てることができるヘルパー ボタンも必要です。

舞台裏で郵便番号をキーとして使用する大規模なJavascriptハッシュ/連想配列があり、これを使用してボタンを作成し、距離を追跡し、どの郵便番号が割り当てられているか割り当てられていないかを追跡します。これは簡単です. ボタンの背景を動的に変更すると、私はうんざりします。

3日間のハッキングの後、次のようなコールバックでJqueryを使用して何かを機能させることができました。

$(".btn").click(function() {
    if ( $(this).hasClass ('make-background-white') {
        $(this).removeClass('make-background-white');
        $(this).addClass ('make-background-green');
    } else if ( $(this).hasClass('make-background-green') {
         // Remove green, add red
    } else if () {
        // Remove red, add white
    }

}

これにより、ボタンが新しい背景で再描画されるようになり、後で読み取って操作できる「クラス」属性に文字列を格納することで機能します。これは、より単純な Javascript の残りの部分の途中でのコールバックであり、"getElementById()" を使用する他の onClick() ルーチンは、同じ方法で "class" 属性を読み取ったり操作したりできないようです。

Javascript で上記を実行するためのヘルプをいただければ幸いです。

4

5 に答える 5

1

プレーンJavaScriptで（この場合はクラス名に依存せずに）背景のカラーサイクリングボタンを実装することが目標である場合、考えられるアプローチの1つを以下に示しますが、おそらく過度に複雑です。

function inArray(needle, haystack) {
    if (!needle || !haystack) {
        return false;
    }
    else {
        var notFound = -1;
        for (var i = 0, len = haystack.length; i < len; i++) {
            if (haystack[i] == needle) {
                return i;
            }
        }
        return notFound;
    }
}

function colorToggle(el, colors) {
    if (!el) {
        return false;
    }
    else {
        var colors = colors || [
            'rgb(255, 0, 0)',
            'rgb(0, 255, 0)',
            'rgb(0, 0, 255)'],
            wGCS = window.getComputedStyle,
            curColor = wGCS(el, null).backgroundColor;
        var pos = inArray(curColor, colors);
        if (pos > -1 && pos < (colors.length - 1)) {
            el.style.backgroundColor = colors[inArray(curColor, colors) + 1];
        }
        else if (pos > -1 && pos == (colors.length - 1)) {
            el.style.backgroundColor = colors[0];
        }
    }
}

var buttons = document.querySelectorAll('button.colorToggle');

for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].style.backgroundColor = 'rgb(255, 255, 255)';
    buttons[i].onclick = function() {
        colorToggle(this, ['rgb(255, 255, 255)','rgb(0, 255, 0)','rgb(255, 0, 0)']);
    };
}​

JSフィドルデモ。

これはChromeでのみ実行する必要があるという保証があるため、Chromium 18でのみテストしました（Google Chromeを明示的にテストするためのWindowsまたはMacがないため）。これは必要に応じて実行されるようです。

参照：

于 2012-06-01T19:44:36.087 に答える
1

変更前に CSS 属性を取得する必要がありますか? この前提条件がない場合の例:

<html>
<head>
<script type="text/javascript">
var bg_colors = ['red', 'blue', 'green']

function change_bg_color()
{
  bg_color = bg_colors.shift();
  bg_colors.push(bg_color);
  document.getElementById("demo").style.backgroundColor=bg_color;
}
</script>
</head>
<body>

<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="change_bg_color()">change background-color</button>

</body>
</html>
于 2012-06-01T19:51:25.347 に答える
1

ボタンごとに一度に 1 つのクラス名のみが必要な場合は、クリック時にクラス名を読み書きできます。

$(".btn").click(function() {
   var c=this.className;
   if(c=='make-background-white' || c=='')this.className='make-background-red';
   else if(c=='make-background-red')this.className='make-background-green';
   else this.className='make-background-white';
}

これは、すべてのボタンがそのように開始されるため (button, .make-background-white{background-color:white;color:black})、またはクラス属性を設定するため、白い背景から開始していることを前提としています。

于 2012-06-01T20:42:07.703 に答える
0

これは jquery setTimeOut 関数で実現できます。色の隠し値を維持することで、スタイルを切り替えることができます

<script>
setTimeout(function() {   
//code to change style to button
}, 10000);
</script>
于 2013-06-26T12:15:51.007 に答える
0

成功。最終的に、Javascript を使用して className 属性にアクセスする方法を見つけました。

そしてどういうわけか-classNameを設定すると、ボタンの再描画がトリガーされるようです。

以下は、 onClick="zipClick('this_button', 'this_textarea')" で呼び出す私の関数です

素晴らしい回答をありがとうございました。

    // This function does 2 things:
    //    Changes the background color of the button
    //    Calls a REST service
    function zipClick (aButtonId, aTextAreaId) {

        var lButton = document.getElementById(aButtonId);
        var lClassName = lButton.className;

        // lClassName should be something like: "btn make-background-yellow"
        //alert ("Button Class Start = " + lClassName);

        if ( lClassName.indexOf('green') > -1 ) {
            lButton.className = 'btn make-background-yellow';
        } else if ( lClassName.indexOf('white') > -1) {
            lButton.className = 'btn make-background-green';
        } else if ( lClassName.indexOf('yellow') > -1 ) {
            lButton.className = 'btn make-background-white';
        } else {
            // Should never get here but fix the class name for the next click
            lButton.className = 'btn make-background-white';
        }

        alert ("old class: " + lClassName + "\nnew class: " + lButton.className);

    }   // zipClick
于 2012-06-01T22:03:58.663 に答える