为什么我可以使用手工制作的jquery插件编辑第一个对象?

时间:2019-05-31 22:12:30

标签: jquery plugins

我的jQuery插件很简单,但仅适用于我的第一个对象

我试图用for循环解决它,但我做不到


(function ($) {
    $.fn.omToolTip = function (userOptions) {
        var options = $.extend({
            width: 200,
        }, userOptions)

        this.each(function () {
            var elm = $(this);
            var ttBox = $("<div>").attr("class", "ttb");

            elm.hover(function () {
                alert("salam");
            }, function () {
                alert("khodafez");
            })

        })
    }
})(jQuery)

1 个答案:

答案 0 :(得分:0)

  

让我猜..您正在使用ID为的该插件将其更改为类   然后重试.. id应该是唯一的,所以不要再使用相同的id   多于一个元素

不,您不应该重复id ..看一下下一个示例,了解使用相同类和相同id的区别

$(document).ready(function(){
  // How to use?
  $('.anyDiv').omToolTip(); // elements with same class
  $('#anyDiv').omToolTip(); // elements with same id just the first one will work if you use id
});
(function ($) {
    $.fn.omToolTip = function (userOptions) {
        var options = $.extend({
            width: 200,
        }, userOptions)

        this.each(function () {
            var elm = $(this);
            var ttBox = $("<div>").addClass("ttb"); // use addClass instead of attr

            elm.hover(function () {
                console.log("salam");
            }, function () {
                console.log("khodafez");
            })

        })
    }
})(jQuery)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- With same Class -->
<div class="anyDiv">Class Any Div</div>
<div class="anyDiv">Class Any Div</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


<!-- With same Id (only the first one here will work with the plugin)-->
<div id="anyDiv">Id Any Div</div>
<div id="anyDiv">Id Any Div</div>

还可以使用.addClass()代替attr('class'.....)

添加类