Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
停止jQuery插件对同一元素应用两次_Jquery - Fatal编程技术网

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

停止jQuery插件对同一元素应用两次,jquery,Jquery,目前,我正试图弄清楚如何在jQuery插件中使用默认和自定义设置。我希望能够将插件的默认设置应用于使用通用类的元素,但是通过选择它们的ID来定制其中的一些元素。例如: 无标题文件 .box{宽度:200px;高度:200px;填充:50px;边距:40px;边框:1px实心;浮点:左;}​ 方框1- 方框2- 方框3- 方框4- (函数($){ $.fn.myPlugin=函数(参数){ var默认值={ 背景:"ddd",, 内容:“富” }; var params=$.extend(默认值

目前,我正试图弄清楚如何在jQuery插件中使用默认和自定义设置。我希望能够将插件的默认设置应用于使用通用类的元素,但是通过选择它们的ID来定制其中的一些元素。例如:


无标题文件
.box{宽度:200px;高度:200px;填充:50px;边距:40px;边框:1px实心;浮点:左;}​
方框1-
方框2-
方框3-
方框4-
(函数($){
$.fn.myPlugin=函数(参数){
var默认值={
背景:"ddd",,
内容:“富”
};
var params=$.extend(默认值,params);
返回此值。每个(函数(){
$(this.css('background-color',params.background)
.附加(参数内容+“”);
})//每个人都把这个还给我
};//fn myPlugin
})(jQuery);
$(函数(){
$('.box').myPlugin();
$('#one').myPlugin({content:'bar'});
$('#two').myPlugin({background:'yellow'});
});//文件准备就绪​
当这个程序运行时,会发生的事情是,它在#1和#2中附加了两个大量的内容,我可以理解为什么;插件在所有带有.box的元素(包括#one和#two)上触发,然后在div#one和#two上再次运行,将新内容附加到顶部

如果不更改或运行选择器上的过滤器,或向html添加额外的类,是否有任何切实可行的方法来解决这个问题,这样就不会将插件应用于同一元素两次?提前谢谢

更新

多亏了Czarchic的建议,这项工作才得以进行。例如:


但是,这取决于插件是否按特定顺序应用。现在,我很高兴,但如果有人能想出一种方法来获得想要的效果,不管它的应用顺序如何,我将不胜感激。感谢大家的帮助。

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

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

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

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

1) 向元素添加其他类,然后基于类调用插件

$('.box.yellow').myPlugin({background:'yellow'});
2) 将
数据-
属性添加到标记中,并在插件中检查它们是否存在,并在插件中相应地修改html

<div class="box" data-bgColor="yellow">Box 1 - </div>
方法将部分取决于插件的总体复杂性或您需要使用插件的频率有几种选择:

1) 向元素添加其他类,然后基于类调用插件

$('.box.yellow').myPlugin({background:'yellow'});
2) 将
数据-
属性添加到标记中,并在插件中检查它们是否存在,并在插件中相应地修改html

<div class="box" data-bgColor="yellow">Box 1 - </div>

这种方法部分取决于插件的整体复杂性或您需要使用它的频率

感谢您的输入charlietfl,但我不想添加额外的类或使用过滤器。我应该说得更具体些——我现在更新了我的问题来反映这一点。好的……你必须修改一些东西……哪个部分更可取?我有一个简单的插件修复会有所帮助。这是因为AJAX问题吗?如果解决这个问题的简单方法不是ajax问题,但不用担心,我现在已经设法让它工作了。谢谢你的帮助。应该在SOI上发布你的解决方案…还是违背问题的目的?我在Czarchic的评论中发布了一个解决方案的链接,但我同意编辑我的原始帖子也会更有意义。我现在就这么做,感谢Hanks提供的输入charlietfl,但我不想添加额外的类或使用过滤器。我应该说得更具体些——我现在更新了我的问题来反映这一点。好的……你必须修改一些东西……哪个部分更可取?我有一个简单的插件修复会有所帮助。这是因为AJAX问题吗?如果解决这个问题的简单方法不是ajax问题,但不用担心,我现在已经设法让它工作了。谢谢你的帮助。应该在SOI上发布你的解决方案…还是违背问题的目的?我在Czarchic的评论中发布了一个解决方案的链接,但我同意编辑我的原始帖子也会更有意义。我现在就要这么做了,thanksCheers Czarchic,我使用了您建议的一个稍微修改的版本,并改变了插件应用于元素的顺序,成功地使它工作起来。Cheers Czarchic,我使用了您建议的一个稍微修改的版本,并改变了插件应用于元素的顺序,成功地使其工作。