Question

我正在制作一个简单的插件功能，可以在单击时将元素的背景颜色变为红色。我添加了如下所示的代码，但无法在点击时获得按钮的背景颜色。有人可以更正代码吗？

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
       $.fn.red({
          red:function(){return this.each(function(){this.style.background=red;})}
       });
    </script>
  </head>
  <body>
    <button onclick="red()">Red</button>
  </body>
</html>

Answer 1

您尚未定义 red应该做什么。你需要这样的东西：

$.fn.red = function(/*options object maybe?*/) {
    return this.css( "background-color", "red" );
};

jsFiddle Example

使用jQuery不需要像这样的内联事件：

$(function() {
    $("button").on("click", function() {
         $(this).red();
    });
});

您应该首先阅读本教程：

https://learn.jquery.com/plugins/basic-plugin-creation/

Answer 2

<强> HTML ：

<button id="red">Red</button>

<强> CSS ：

.red-cell {
   background: #F00; /* Or some other color */
}

<强> JS ：

 $( function() {
  $('#red').click( function() {
    $(this).toggleClass("red-cell");
  });
 });

Answer 3

你可以按照以下方式重新编写你的javascript代码，

$(document).ready(function(){
    $(".button").click(function(){
        $(this).css( "background-color", "red" );
    });
})

小提琴：https://jsfiddle.net/nileshmahaja/v2cobdvv/

Answer 4

要使这个工作成为一个合适的插件，你必须在插件函数中将click事件绑定到元素本身，如：

$.fn.red = function() {
    $(this).each(function(){
        var elem = $(this);
        elem.bind('click',function(){
            elem.css({backgroundColor:'red'})
        });
    });
};

现在您不必为每个元素一次又一次地调用click事件。你可以为多个元素调用它，如下所示：

$('span,button').red();

您可以在此处看到jsfiddle：http://jsfiddle.net/lokeshpahal/ghLssvos/3/

Answer 5

    function red() {    
        alert("fgdfg");    
        $("#btn").css("background-color", "red");
    }

    <input type="button" id="btn" onclick="red()" value="Red"/>

jQuery插件功能在点击时改变背景颜色

5 个答案: