Question

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

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

DataFrame

Answer 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

Answer 2

问题是将链接[value=]与“当前”链接相关联。

您可以通过多个if的代码执行此操作，例如：

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

或在交换机中相同，例如：

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在动画期间可能不正确并且会显示所有要开始的文本（很容易修复） - 但原则是通过{{1}链接} attributes

将jQuery代码重构为可重用的函数

2 个答案: