0

<td>本質的には、ユーザーがチェックマークをクリックすると画像の色が変わるテーブルである小さなインタラクティブを作成しています。ユーザーがすべての決定を下した後、送信をクリックします。これは、私が助けを求めることができる部分です。

<td>現在、これにアプローチする方法についての私の計画/アイデアは、テーブル (28) を持つすべての に ID を割り当てることです。テーブルのサイズは (4x7) です。私の考えは、次のようなことをする場合です->

If TD1 $clicked == 1 then (true)
  TD1.css("background-color", "green");
else
  TD1.css("background-color", "red");

If TD2 $clicked == 3 then (true)
  TD2.css("background-color", "green");
else
  TD2.css("background-color", "red");

If TD3 $clicked == 2 then (true)
  TD3.css("background-color", "green");
else
  TD3.css("background-color", "red");

等々...

この構文が 100% 正しいわけではないことはわかっていますが、アイデアはそこにあります。したがって、28 項目すべてに対してこれを行います。私が求めていること; 私が見ていないこれに対するより簡単なアプローチはありますか？どんな助けでも大歓迎です。

編集：

ここにいくつかのコードがあります

<table> 
<tr>
        <td>Frying</td>
        <td id="td1"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
        <td id="td2"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td3"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td4"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td5"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td6"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td7"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
        </tr>
</table>

jQuery には、強調表示されたバージョンに変更する img の onclick イベントがあります。

表にはこの 1 行以外にも多くの情報がありますが、最終的な結果は、ユーザーがすべての項目をクリックして送信ボタンをクリックすることです。クリックすると、各ボックスが正しいかどうかがチェックされ、正しい場合は背景が緑に変わり、そうでない場合は赤に変わります。したがって、td1 は (クリック = 1) に等しく、td2 は (クリック = 2) に等しい可能性があります。

以前は十分な情報を提供できなかったことをお詫びします。まだかなり新しいものです。

4

2 に答える 2

3

すべての「クリック可能な」要素を同じクラスに割り当て、スタイリング (赤または緑) を切り替える jQuery を使用して、そのクラスのリスナーを登録します。すべての要素にリスナーを追加することもできtdますが、クリック可能にするつもりのない要素を誤って選択してしまう可能性があります。

赤/緑のスタイリングには CSS を使用します。

CSS

.red {
    background-color: red;
}

.green {
    background-color: green;
}

Javascript (jQuery):

$('.clickable').on('click', function(e) {
    if($(this).is('.red')) {
        $(this).removeClass('red').addClass('green');
    } else {
        $(this).removeClass('green').addClass('red');
    }
});
于 2013-04-15T19:04:16.197 に答える
1

もっと良い方法があるかもしれませんが、私はこのようなことをします。

HTML:

<table>
    <tr><td><input type="checkbox" name="0"/>0</td></tr>
    <tr><td><input type="checkbox" name="1"/>1</td></tr>
    <tr><td><input type="checkbox" name="2"/>2</td></tr>
</table>

JS:

var colors = ["blue", "green", "yellow"];
$(function () {
    $("input").on('click', function () {
        $(this).is(':checked') ?
            $(this).parent().css("background-color", colors[$(this).attr('name')]) :
            $(this).parent().css("background-color", "white");
    });
});

http://jsfiddle.net/PXEt9/

于 2013-04-15T19:12:02.183 に答える