1

「ゼブラ」の偶数/奇数行を提供するこの小さな選択コードがあります。そのためにCSSを変更する方法がわかりません：

1、リストされる他のすべて（毎秒ではない）には.evencssが必要です

2、それらの1つがクリックされた場合も太字にする必要があります

（これら2つの問題をどのようにマージするかがわかりませんでした）

初心者からの助けをいただければ幸いです。

<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
?>

<ul>
  <?php foreach ($query as $i => $row) { ?>
    <li>
      <?php if ($i)?>
      <input name="checkbox_add[]" id="test_<?php echo $i ?>" type="checkbox" value="<? echo $row['id']; ?>"/>
      <label for="test_<?php echo $i ?>"><a href="test1.php?gid=<?php echo $row['id']; ?>"><?php echo $row['name']; ?></a></label>
    </li>
  <?php } ?>
</ul>
</div>
4

2 に答える 2

2

CSSでクラスoddまたはeven(どちらを交互の色にしたいかによって異なります) を定義する必要があります。

「奇数」を選択したとしましょう。次に、PHP コードでカウンターを定義し、モジュロ 2 の剰余が 1 に等しいかどうかを確認します。そうであれば、クラス 'odd' を に追加し<li>ます。

<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
$idx = 0;
?>


<?php if ($idx % 2 == 0): ?>
    <li>
<?php else: ?>
    <li class="odd">
<?php endif; ?>
<?php 
  $idx++;
  if ($i): ?>
  ...your <input> and <label>...

ただし、クリック時に対応する行を太字にすることは、クライアント側のイベントであり、それに応答するコードもクライアント側に属しているため、Javascript で行うことをお勧めします。これは私の言いたいことを示すための大まかな解決策ですが、懸念事項の明確な分離と「目立たない」Javascriptに関してはお勧めできません。理想的には、Javascript 内のイベント ハンドラー フォームをアタッチする別の Javascript ファイルにこれを配置します。きれいに保ちたい場合、これは HTML には属しません。

<input type="checkbox" onclick="this.parentNode.className='bold'" ...>
于 2011-08-29T23:13:52.580 に答える
1

jqueryやprototypeなどで行う方が簡単です。私は次のようなプロトタイプでそれを行います：

$$('ul li:nth-child(odd)').invoke('addClassName', 'alt-row'); 
// Add class "alt-row" to even table rows

したがって、奇数番号の li 項目をすべて選択し、適切な css を適用 (呼び出し) します。奇数リスト項目でも同じことを行い、他の CSS を適用するだけです

太字の部分については、すべての li アイテムに onClick イベントを追加し、太字にするスタイルを次のように設定します。

<li onClick="this.className='bold'">Something</li>
于 2011-08-29T22:43:43.167 に答える