Question

我正在用HTML创建自己的元素和属性。但是，如果我将自定义属性应用于一个元素，则会将该属性应用于页面上其余的相同元素。我只希望将该属性应用于单个元素，而不是所有元素。

这是我的HTML：

<!doctype html>
<html lang="en">
<head>

<link rel="stylesheet" href="style.css">

</head>
<body>

    <button rightal="true">Button</button>
    <button>Button</button>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="style.js"></script>
</body>
</html>

这是我的jQuery：

//Define all variables
var rightal = $("button").attr("rightal");

if(rightal == "true") {
  $("button").css("float", "right");
}

因此，我的问题是，当我将rightal属性添加到第一个按钮并将其设置为true时，它可以使按钮正确对齐，但是也可以使所有其他按钮正确对齐，我只希望它对齐一个按钮。

有什么想法吗？

Answer 1

使用查询字符串button[rightall="true"]仅选择该按钮：

$('button[rightall="true"]').css("float", "right");

请注意，非标准属性通常不是一个好主意-考虑改用.data-属性，例如：

<button data-rightal="true">Button</button>

和

$('button[data-rightall="true"]').css("float", "right");

如果未找到此类匹配元素，则不会引发任何错误（就像您当前的代码一样），就不会有DOM更改。

如何使自定义属性仅适用于一个元素？

1 个答案: