php - 如何在 PHP 循环中更改 CSS 的类名？

Question

您好，我正在尝试根据类名更改某些 DIV 上的 CSS 内容。

为了更好地解释，我在 PHP 中有一个 while 循环从数据库读取数据以输出 DIV，我有一个名为“section”的字段，其中包含 A、B、C、D、E、F、G 等数据。

对于位于“A”和“B”部分的 DIV，我希望类名是 desk_box_hor(对于水平)，否则我希望它是 desk_box_ver(垂直)。

下面是我尝试只做两个需要垂直的部分 (A,B)。其他的需要水平。如果有更有效的方法，请告诉我。我在屏幕上输出了大约 200 个这样的 DIV。

如果你有更好的标题请推荐一个，我不知道该放什么哈哈。

提前致谢!

My fiddle of what I want both DIVs to look like

PHP:

while($row = mysqli_fetch_assoc($desk_coord_result)){   
                        //naming X,Y values
                        $id    = $row['coordinate_id'];
                        $x_pos = $row['x_coord'];
                        $y_pos = $row['y_coord'];
                        $sec_name = $row['section_name'];
                        //draw a DIV box at its X,Y coordinate   
    //if section A and B do vertical                    
    if($sec_name == 'B' || $sec_name == 'A'){
        echo '<div class="desk_box_ver" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';

    }
//else do it horizontal
    else{
        echo '<div class="desk_box_hor" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
        }
    } //end while loop for desk_coord_result

CSS:

/* desk boxes*/
.desk_box_ver{ 
width: 23px;
height: 10px;
border: 4px solid black; 
padding:10px;
}   

.desk_box_hor{ 
width: 10px;
height: 23px;
border: 4px solid black; 
padding:10px;
}   

另外，假设我想在同一个 Jquery 函数中使用这两个类，这是正确的做法吗？

$(".desk_box").add(".desk_box_ver").click(function() {
or
$(".desk_box, .desk_box_ver").click(function() {

Answer 1

在回答您的问题“如果有更有效的方法，请告诉我。” (我会把你的其他问题留给其他人)是的，有更有效的方法来编写这段 PHP 代码，从而使调试和维护更容易:-

a) 引入一个新的 PHP 变量，例如 $class，而不是两个几乎完全相同的非常长的回显字符串。然后写:

$class = 'desk_box_hor';
if($sec_name == 'A' || $sec_name == 'B'){
    $class = 'desk_box_ver';
}
echo '<div class="' . $class . '" data="' . $id . '" style="position:absolute;left:' . $x_pos . 'px;top:' . $y_pos.'px;">id:' . $id . '</div>';

现在您只需编写一个长回显字符串并进行调试。 此外，我的偏好是(虽然这只是个人意见)在所有这些字符串连接点运算符的两边放置一个空格 - 这样可以更容易地解读发生了什么。

b) 您可以做的下一个改进是交换所有的单引号和双引号。然后您可以编写一个完全没有连接运算符的字符串，就像您可以将 PHP 变量放在双引号内一样。同样，它使 html 字符串更清晰，更易于阅读和调试。 (浏览器可以处理 HTML 标签中的单引号或双引号)。你最终得到:

 echo "<div class='$class' data='$id' style='position:absolute;left: $x_pos" . "px;top: $y_pos" . "px;'>id:$id</div>";

c) 接下来我们可以使正在创建的 HTML 代码更具可读性；目前您的脚本正在生成一大块没有换行符的 HTML 标记(200 div？)。可怕的调试。只需将\n 添加到回显字符串的末尾，如下所示:

echo ".....id:$id</div>\n";

这会将生成的 HTML 标记拆分为单独的行(但屏幕上的文本不会受到影响)。然后更容易查看其中一项是否出错(例如，如果数据库为其中一项记录返回空值，它将在 HTML 中脱颖而出)。请注意，您可以在用双引号引起来的字符串中添加\n；如果您保留原始单引号字符串，则必须添加点运算符:

.....id:$id</div>' . "\n";

d) 最后，您可以从生成的 HTML 标记中删除所有这 200 个position:absolute字符串，方法是将其放入您的 CSS 样式表中，只保留变化的 CSS 值。即:

.desk_box_hor, .desk_box_ver { position: absolute; }