jquery 插件 .append .each 和一个唯一的 id
Posted
技术标签:
【中文标题】jquery 插件 .append .each 和一个唯一的 id【英文标题】：jquery plugin .append .each and a uniqe id 【发布时间】：2021-08-28 20:59:17 【问题描述】：我正在尝试创建一个简单的插件
下面的代码在 header 属性中添加了每个 style 标签。 style 标签包含 CSS 动画，动画名称为 animate
(function( $ )
$.fn.plugin = function( options )
this.each(function()
var keyFrames = "@keyframes animate 0%transform:translate3d(0,0,0)100%transform:translate3d(-250px,0,0)";
$("<style type='text/css'>" + keyFrames + "</style>").appendTo($("head"));
);
return this;
;
( jQuery ));
$( ".animation" ).plugin();<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div class="animation">dsdsd</div>
</body>
</html>但我试图在每次添加不同的动画名称时都这样做。例如... 这不起作用
(function( $ )
$.fn.plugin = function( options )
this.each(function()
var counter = 1;
var keyFrames = "@keyframes animate" + counter++ " 0%transform:translate3d(0,0,0)100%transform:translate3d(-250px,0,0)";
$("<style type='text/css'>" + keyFrames + "</style>").appendTo($("head"));
);
return this;
;
( jQuery ));
$( ".animation" ).plugin();<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div class="animation">dsdsd</div>
</body>
</html>【问题讨论】：
应该是counter++ +"...
【参考方案1】：
当您运行代码时，您会看到 Uncaught SyntaxError: Unexpected string. 这是您实际查看的第一个线索（您使用过字符串的某个地方）。
如果您查看此行：var keyFrames = "@keyframes animate" + counter++ " 0%transform:translate3d(0,0,0)100%transform:translate3d(-250px,0,0)";，您的问题是您有 counter++，但之后不要连接任何内容。您的代码应如下所示：
(function( $ )
$.fn.plugin = function( options )
this.each(function()
var counter = 1;
var keyFrames = "@keyframes animate" + counter++ + " 0%transform:translate3d(0,0,0)100%transform:translate3d(-250px,0,0)";
$("<style type='text/css'>" + keyFrames + "</style>").appendTo($("head"));
);
return this;
;
( jQuery ));
$( ".animation" ).plugin();<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <div class="animation">dsdsd</div> </body> </html>【讨论】：
以上是关于jquery 插件 .append .each 和一个唯一的 id的主要内容，如果未能解决你的问题，请参考以下文章
jQuery基础（DOM篇，append()，after()，prepend()，insertAfter()，节点删除，遍历方法each()）
jquery中append加进去的节点元素，为啥再使用each遍历里面相同的元素无效？
为啥在 jQuery 插件中返回 this.each(function())？