Question

下面是我的jQuery代码:(你可以看到整个源代码并测试它here）

$("document").ready(function() {
    $("#pclass").hover(function() {
        $("p[class]").css("border", "3px solid red");
      }, function() {
        $("p[class]").css("border", "none");
      }
    );
    $("#pidpara1").hover(function() {
        $("p[id=para1]").css("border", "3px solid red");
      }, function() {
        $("p[id=para1]").css("border", "none");
      }
    );
  ...
  }

你知道，我多次使用css("border", "3px solid red");和css("border", "none");。那么在这种情况下如何才能使代码可以正常重用呢？（您可以查看整个源代码并对其进行测试here）1。

Answer 1

弄清楚操作的哪些部分是相同的，哪些部分是不同的，然后创建一个函数来接受变化的部分的参数：

$(document).ready(function() {
    addBorderOnHover("#pclass", "p[class]");
    addBorderOnHover("#pidpara1", "p[id=para1]"); // "p[id=para1]" can be "#para1", of course

    function addBorderOnHover(hoverSel, borderSel) {
        $(hoverSel).hover(function() {
            $(borderSel).css("border", "3px solid red");
          }, function() {
            $(borderSel).css("border", "none");
          }
        );
    }
});

附注：另请注意，我删除了document周围的引号，该引号不应该在那里。

jQuery悬停函数内的可重用函数

1 个答案: