javascript - 如何在html超链接中调用函数

Question

好吧，我已经在这里搜集了很多问题，并且我已经从这些问题中得到了我能做的，但它似乎仍然没有用。 (我对 JavaScript/jQuery 还很陌生。)

这是 jsFiddle:https://jsfiddle.net/5ffhoqpt/1/

var showPhotography = function () {
    $(".design").hide();
    $(".film").hide();
    $(".web").hide();
}

var showDesign = function () {
    $(".photography").hide();
    $(".film").hide();
    $(".web").hide();
}
var showWeb = function () {
    $(".design").hide();
    $(".film").hide();
    $(".photography").hide();
}

var showFilm = function () {
    $(".design").hide();
    $(".photography").hide();
    $(".web").hide();
}

我试图让每个链接只显示具有相应类的 div，而其他的应该被隐藏。 (我现在意识到我忘记显示链接名称对应的类，但这不能解决我的问题)我点击链接，什么都不会被隐藏，控制台中也没有错误，所以我真的没有知道从哪里开始排除故障。

解决方案不能包含#tags，因为我需要在多个不同的部分和容器上重用该类。我的网站上还有其他可用的 javascript，因此 jquery 的链接不会成为问题。它一定是我的代码中的其他东西阻止了下面所有的工作解决方案在我的网站上工作。

Answer 1

你可以这样做:

Full demo

<a href="" data-action="showPhotography">Photography</a>

var showPhotography = function () {
        $(".design").hide();
        $(".film").hide();
        $(".web").hide();
    }

var showDesign = function () {
    $(".photography").hide();
    $(".film").hide();
    $(".web").hide();
}
var showWeb = function () {
    $(".design").hide();
    $(".film").hide();
    $(".photography").hide();
}

var showFilm = function () {
    $(".design").hide();
    $(".photography").hide();
    $(".web").hide();
}

var actions = {
    showPhotography: showPhotography,
  showDesign: showDesign,
  showWeb: showWeb,
  showFilm : showFilm
}

$("[data-action]").on('click', function(e) {
  e.preventDefault();
  var action = $(this).data('action');
  actions[action]()
});