gpt4 book ai didi

jquery - 停止 jQuery 插件对同一元素应用两次

转载 作者:行者123 更新时间:2023-12-01 07:23:44 25 4
gpt4 key购买 nike

目前我正在尝试弄清楚如何在 jQuery 插件中使用默认和自定义设置。我希望能够使用通用类将插件的默认设置应用于元素,但还可以通过选择其 ID 来自定义其中一些元素。示例:http://jsfiddle.net/srkPT/2/

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.box {width:200px; height:200px; padding:50px; margin:40px; border:1px solid; float:left;}​
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>

<body>

<div class="box">Box 1 - </div>

<div id="one" class="box">Box 2 - </div>

<div id="two" class="box">Box 3 - </div>

<div class="box">Box 4 - </div>

<script type="text/javascript">

(function($) {


$.fn.myPlugin = function(params) {

var defaults = {

background: '#ddd',

content: 'foo'

};

var params = $.extend(defaults, params);

return this.each(function() {

$(this).css('background-color', params.background)

.append(params.content + ' ');

}); //RETURN this EACH

}; //fn myPlugin

})(jQuery);


$(function(){

$('.box').myPlugin();

$('#one').myPlugin({content:'bar'});

$('#two').myPlugin({background:'yellow'});

});//document READY​

</script>

</body>
</html>

运行时会发生什么,它会向 #one 和 #two 附加 2 block 内容,我可以理解为什么;该插件会在所有带有 .box 的元素上触发(包括 #one 和 #two),然后在 div #one 和 #two 上第二次运行,将新内容附加在顶部。

如果不更改或在选择器上运行过滤器,或者向 html 添加额外的类,是否有任何实用的方法可以解决此问题,因此它不会将插件两次应用到同一元素?提前致谢。

更新

由于 czarchaic 的建议,这个工作得以实现。示例:http://jsfiddle.net/srkPT/3/

但是,它取决于以特定顺序应用的插件。现在,我很高兴,但如果有人能想出一种方法来获得所需的效果,无论应用哪个顺序,我将不胜感激。感谢大家的帮助。

最佳答案

您可以设置数据属性并对其进行测试。

$.fn.myPlugin=function(){
return this.each( function(){
if ( $( this ).data( 'test' ) ){
return false;
}
$( this ).data( 'test', true );
// plugin code
});
};

关于jquery - 停止 jQuery 插件对同一元素应用两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11066214/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com