Question

我有这个小选择代码，它应该提供'斑马'偶数/奇数行。我不明白如何更改css：

1，所列出的每一个（而不是每一秒）都应该有.even css

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>

Answer 1

您应该在CSS中定义一个班级odd或even（取决于您希望在交替颜色中使用哪一个）。

假设你选择'奇数'。然后在PHP代码中定义一个计数器，并检查模2的余数是否等于1 - ＆gt;如果是这样，将类'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'" ...>

Answer 2

使用jquery或原型或类似的东西来做它会更容易。我会用原型来做，像这样：

$$('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>

<ul>和超链接问题</ul>中的斑马（偶数/奇数）行css

2 个答案: