将 jQuery 代码重构为可重用函数答案

【问题标题】：Refactoring jQuery code into reusable function将 jQuery 代码重构为可重用函数
【发布时间】：2017-11-07 12:07:48
【问题描述】：

如果有人能帮我将此代码重构为可重用函数并告诉我如何使用它，我将不胜感激。我只是一个初学者，但可以看到我在重复很多东西，我相信有一种方法可以更好地编写它。

如果需要，我可以添加 html。

$("[value=home]").click(function() {
    $(currentLink).removeClass("cantclick");
    $(current).hide();
    $(this).addClass("cantclick");
    $("#texts").fadeIn(900);
    current = $("#texts");
    currentLink = $("[value=home]");
    console.log("current is " + current.text() + ".");
});

$("[value=aboutme]").click(function() {
    $(currentLink).removeClass("cantclick");
    $(current).hide();
    $(this).addClass("cantclick")
    $("#aboutmetext").fadeIn(900);
    current = $("#aboutmetext");
    currentLink = $("[value=aboutme]");
    console.log("current is " + current.text() + ".");
});

$("[value=tuition]").click(function() {
    $(currentLink).removeClass("cantclick");
    $(current).hide();
    $(this).addClass("cantclick")
    $("#tuitiontext").fadeIn(900);
    current = $("#tuitiontext");
    currentLink = $("[value=tuition]");
    console.log("current is " + current.text() + ".");
});

$("[value=consultancy]").click(function() {
    $(currentLink).removeClass("cantclick");
    $(current).hide();
    $(this).addClass("cantclick")
    $("#consultancytext").fadeIn(900);
    current = $("#consultancytext");
    currentLink = $("[value=consultancy]");
    console.log("current is " + current.text() + ".");
});

【问题讨论】：

标签： jquery function refactoring

【解决方案1】：

首先创建一个包含所有通用代码的函数：

function handleClick(elem, current, currentLink, text) {
    currentLink.removeClass("cantclick");
    current.hide();
    elem.addClass("cantclick");
    text.fadeIn(900);
    console.log("current is " + current.text() + ".");
}

然后你可以使用这个函数并像这样传递你的元素：

$("[value=consultancy]").click(function() {
    handleClick($(this), $("#consultancytext"), $("[value=consultancy]"), $("#texts"));
}
// ... add it to the other elements the same way

【讨论】：

谢谢你，但每次调用函数时，currentLink 都需要不同，因为之前按下了哪个按钮......所以我不能抢占 currentLink 值是什么...... .我希望这是有道理的
如何声明一个全局变量并在每次单击按钮时将该元素分配给该变量？所以有一个全局var currentLink;，每次点击一个按钮时都做currentLink = $(this);。然后，您可以在函数中使用该变量。
谢谢史蒂文，这真的很有帮助。我试试看，R

【解决方案2】：

问题是将链接 [value=] 链接到“当前”。

您可以通过包含多个ifs 的代码来完成此操作，例如：

var linked = "";
var val = $(this).attr("value");
if (val === "home") linked = "texts";
if (val === "aboutme") linked = "aboutmetext";

或者同一个switch，例如：

var linked = "";
switch ($(this).attr("value")) 
{
    case "home": linked="texts"; break;
    case "aboutme": linked="aboutmetext"; break;
}

当您添加/删除链接时，这两个都需要维护，所以我首选的方法是通过数据属性链接它们：

<div class='button-container'>
  <button data-value="home">home</button>
  <button data-value="aboutme">about me</button>
  <button data-value="tuition">tuition</button>
</div>
<div class='texts-container'>
  <div data-link="home">home text</div>
  <div data-link="aboutme">about me text</div>
  <div data-link="tuition">tuition text</div>
</div>

那么你的代码就简单多了：

$("[data-value]").click(function() {
    $(".cantclick").removeClass("cantclick");
    $(this).addClass("cantclick");
    $(".texts-container :visible").fadeOut(900, function() {
        $("[data-link=" + $(this).data("value") + "]").fadeIn(900);
    });

    // can get these dynamically, no need to store them in variables
    // current = $("button.cantclick")
    // currentLink = $("[data-value=" + $("button.cantclick").attr("value") + "]"); 
});

并且在添加/删除按钮/链接时无需更新它。

可能需要一些解决淡入/淡出的工作，因为:visible 在动画期间可能不正确，并且会显示所有开始的文本（很容易修复） - 但原则是通过data- 属性进行链接

【讨论】：