当设备宽度为特定大小时，向元素添加几个自定义属性

Question

考虑以下html作为导航菜单中的链接：

<a id="mainLink" href="#");">A Main Link</a>

我想做的是，当设备宽度为320px或更小时，我想为id为mainLink的元素添加几个属性，因此生成的代码如下所示：

<a data-toggle="collapse" data-target=".navbar-collapse" id="mainLink" href="#">A Main Link</a>

我的想法是遵循我今天看到的一些例子，创建一个函数：

<script type="text/javascript">
function addToggle () {
$(window).resize(function() {
$("#mainLink").attr('data-toggle', 'collapse');
$("#mainLink").attr('data-target', '.navbar-collapse');
});
}
</script>

但是，我有点困惑，这个函数应该检查什么？我认为下面的链接表明了一个很好的方法，但如果能提供更多帮助，我们将不胜感激。谢谢

jquery如果宽度小于，则更改此属性

Answer 1

你非常接近。

$(window).on("resize", function () {
if($(window).width() <= 320) {
$("#mainLink").attr({
'data-toggle': 'collapse',
'data-target': '.navbar-collapse'
});
} else {
$("#mainLink").removeAttr('data-toggle data-target');
}
}

我想为元素s添加几个属性，id为主链路

您不应该有多个具有相同id的元素。如果您打算有多个带有相同id的元件，您应该将id更改为一个类。