Question

您好我尝试了多种解决方案，我可以找到论坛但是，我想我需要先了解最基本的内容：）

我创建了一个（非常）简化的我要创建的插件示例，它在不同的DOM对象上使用鼠标事件，但现在点击所有div更改为＆＃39; lime＆＃39;。我怎样才能解决这个问题？



<!doctype html>
<html>
<head>
</head>
<script src="jquery.js"></script>
<script>
(function ($, color, otherColor){
var otherColor= 'yellow';

$.fn.tester = function(color, otherColor){
    otherColor= otherColor;
    this.css('background-color', color);
    this.on('click', changeColor);
}

function changeColor(e){
    $(this).css('background-color', otherColor);
}

}(jQuery));
</script>
<script>
 $(document).ready(function(){
    $('#tester').tester('green', 'purple');
    $('#tester2').tester('black', 'gray');
    $('#tester3').tester('orange', 'lime');
});
</script>
<body>
    <div id="tester" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div>
    <div id="tester2" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div>
    <div id="tester3" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div>
</body>
</html>

<!doctype html> <html> <head> </head> <script src="jquery.js"></script> <script> (function ($, color, otherColor){ var otherColor= 'yellow'; $.fn.tester = function(color, otherColor){ otherColor= otherColor; this.css('background-color', color); this.on('click', changeColor); } function changeColor(e){ $(this).css('background-color', otherColor); } }(jQuery)); </script> <script> $(document).ready(function(){ $('#tester').tester('green', 'purple'); $('#tester2').tester('black', 'gray'); $('#tester3').tester('orange', 'lime'); }); </script> <body> <div id="tester" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div> <div id="tester2" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div> <div id="tester3" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div> </body> </html>

Answer 1

您需要将颜色保存在闭包中。如果使用全局变量，则它始终包含已设置的最后一种颜色。

this.on("click", function() {
    changeColor(this, otherColor);
});

...

function changeColor(element, color) {
    element.css('background-color', color);
}

Answer 2

您的代码中存在一些问题。试试这个：

<html>
<head>
</head>
<script src="jquery.js"></script>
<script>
(function ($, color, otherColor){

    $.fn.tester = function(color, otherColor){
        this.css('background-color', color);
        this.on('click', function(){
            $(this).css('background-color', otherColor);
        });
    }

}(jQuery));
</script>
<script>
 $(document).ready(function(){
    $('#tester').tester('green', 'purple');
    $('#tester2').tester('black', 'gray');
    $('#tester3').tester('orange', 'lime');
});
</script>
<body>
    <div id="tester" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div>
    <div id="tester2" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div>
    <div id="tester3" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div>
</body>
</html>

具有多个实例的Jquery插件

2 个答案: