Question

在我的画廊中，我想要显示我的图像，但我有两种格式的图像：1/1：方格式，2/3：纵向格式。

我为ul容器创建了一个类（结果），然后将图像添加到其中。通过修改某些属性，我将其垂直和水平居中。有些图像看起来较小，因为它们的格式我不能只放宽度（8em）。

我的问题是：我可以将frm作为属性添加到我的图片代码src吗？如果是，我将从我的数据库中获得此值。

我的脚本不起作用。我的Javascript是：

$(document).ready(function() {
    if ($("ul.result li img").attr('frm')='1/1') 
    {
        $("ul.result li img").css('width','10em');
    }

    if ($("ul.result li img").attr('frm')='2/3') 
    {
        $("ul.result li img").css('width','8em');
    }
});

Answer 1

为什么你甚至为此使用javascript？

您有一个数据库属性，并且您正在根据数据库属性更改css属性。那是什么课程！

<img class=<?php (img.frm=="1/1"?"square":"portrait") ?> src=..... />

然后，在你的CSS中：

.square{
    width: 10em;
}

.portrait{
    width: 8em;
}

Answer 2

由于您使用的是jQuery，因此您可以使用data方法（http://api.jquery.com/data/）和html中元素的属性来存储您想要的任何内容。供您参考，如下所示：

<强> HTML

<img src="file" data-format="square" />

<强>的Javascript

$(function () {
    $("img").each(function () {
       if ($(this).data("format") == "square") {
          // process square image element ("this")
       } else {
          // process normal image
       }
    });
});

现在，这说 - 正如其他人所说，你可能会考虑使用css类来改变你的风格，而不是写一堆Javascript代码。我考虑编写javascript（而不是css）的唯一原因是，是否需要进行复杂的计算。但是，大多数情况下，如果你正确构建你的html，你可以用纯css（没有Javascript）做任何你需要的事情。

Answer 3

如果要添加自制属性，请使用HTML5数据属性，所以它有效：data-portrait和data-landscape会很好。

这些属性可以通过CSS或js

进行访问

回答你的问题：

是的，你可以，但我建议使用：data-frm作为属性名称，并避免在值中使用特殊的字符。

从W3C阅读一些内容：）

显示具有正确属性的图像

3 个答案: