Question

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

为了更好地解释，我在PHP中有一个while循环从数据库读取输出DIV，我有一个名为＆＃34; section＆＃34;使用A，B，C，D，E，F，G等数据。

对于位于＆＃34; A＆＃34;部分的DIV。和＆＃34; B＆＃34;我希望类名为desk_box_hor（对于水平）ELSE我希望它为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>';

现在你只需要一个长的echo字符串来编写和调试。此外，我的偏好是（虽然这只是意见）在所有字符串连接点运算符的任一侧放置一个空格 - 这使得更容易破译最新情况。

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字符串的末尾，如下所示：

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

将生成的HTML标记拆分为单独的行（但屏幕文本不受影响）。然后更容易看出其中一个项目是否出错（例如，如果数据库为其中一个记录返回一个空值，它将像HTML一样在HTML中突出显示）。请注意，您可以在由双引号括起的字符串中添加\ n;如果你使用原始的单引号字符串，则必须使用点运算符添加：

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

d）最后，您可以将所有这200个位置：生成的HTML标记中的绝对字符串放入CSS样式表中，只保留不同的CSS值。即：

.desk_box_hor, .desk_box_ver { position: absolute; }

Answer 2

至于你为什么只获得垂直div，从不横向，我只是尝试一种有根据的猜测。你真的从数据库中找到了你认为你的样子吗？

例如，您在评论中说字段名称为＆＃34; section＆＃34;，但PHP正在寻找＆＃34; section_name＆＃34;领域。或者数据本身是错的？您是否有PHP错误检查，例如错误（报告（E_ALL）？如果没有，它不会返回错误消息，但仍然盲目地继续读取数据库中的所有行。

在这种情况下，它总会占用你的if ... else的else部分。据说这是水平div路径，但由于CSS的宽度和高度值的方向错误（见上文），它实际上会一直产生垂直方框。

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

2 个答案: