处理带有空格的 CSS 类名

Posted 2023-02-24

【中文标题】处理带有空格的 CSS 类名

【英文标题】：handling css class names with spaces

【发布时间】：2016-05-27 11:02:12

【问题描述】：

您好，我正在开发一个由 Django 驱动的项目。以下是我的html文件（模板）中的代码

% for l in items  %

                                <td style="text-align: center"
                                    id="m.id_m.set">
                                </td>

% endfor %

还有一个 JS 脚本：

<script>

$(document).ready(function() 
    % for a in all_results %
            $('#a.id_a.set').html('a.id');
            $('#a.id_a.set').addClass(' a.size__status ');
    % endfor %
);
</script>

表示 td 的类将根据我的数据库中的状态列发生变化。

我的 CSS：

.completed
    background-color: #4dff4d;

有些状态是带空格的（不仅仅是像“完成”这样的一个词）。例如：“尚未开始”。所以当我传递这个值时，我的类属性不起作用。如何处理这个问题？先谢谢各位了

【问题讨论】：

显示结果模型的相关部分可能会有所帮助。

【参考方案1】：

您根本不应该在状态中使用空格。 更好的主意是使用来自django-model-utils 的Choices 然后您可以像这样在模型中定义状态：

STATUS = Choices(
    ('completed', 'completed'),
    ('not_yet_started', 'Not yet started')
)
status =  models.CharField(choices=STATUS, max_length=20)

元组的第一个值存储在数据库中。您可以用来显示的第二个。你可以这样访问它

obj.status # gives "not_yet_started"
obj.get_status_display # gives "Not yet stared"   

更新：

如果您不想/不能更改数据库中的条目，有两种可能的解决方案。

javascript：

'a.status'.replace(' ', '_')

django 模型属性：

def status_name(self): return self.status.replace(' ', '_')

【讨论】：

是的。是的。但它已经作为带有空格的状态值列存在于我的数据库中。这就是为什么这个麻烦

嗯。然后我建议迁移数据库。另一种选择可能是使用 javascript 去除空格。喜欢'a.status'.replace(' ', '_')

【参考方案2】：

如果您不想更改状态名称，请向您的模型添加一个属性，该属性将为您生成正确的类名称：

@property
def class_name(self):
    return self.size.status.replace(" ", "_")

你可以这样使用它：

<script>
$(document).ready(function() 
    % for a in all_results %
            $('#a.id_a.set').html('a.id');
            $('#a.id_a.set').addClass(' a.class_name ');
    % endfor %
);
</script>

【讨论】：

对不起尼玛，我刚刚编辑了我的问题。因为状态来自另一个模型并且得到的值是size__status

为什么名字里有两个下划线？

嗨 Nima，实际上是两个下划线，因为我需要通过外键访问另一个模型的字段。