Question

一个简单的问题。

目前，我在一个页面上有12个链接，以及在单击每个按钮时运行的12个相应的javascript代码。

我知道100％必须有一个方法，有一个javascript代码和链接传递一个变量，所以我不必有12个不同的代码。

EG。这是我目前正在使用的链接：

<a href="#" id="button1">Anatomical Pathology</a>

单击链接时运行的Javascript函数会将一些html从php脚本加载到之前定义为level2的div中：

$('#button1').click(function() {
    level2.load("http://hello/script.php?url=poodles");
});

我真正喜欢的是这样的链接：

<a href="#" id="button1" passurl="poodles">Anatomical Pathology</a>

这个函数是这样的，所以我只需要1函数而不是12：

$('#button1').click(function() {
    level2.load("http://hello/script.php?url=' + passurl + '");
});

如何将链接标记中的数据转换为javascript，以及如何将此传递的变量添加到我希望javascript从中提取数据的网址？

Answer 1

passurl不是标准属性，您应该使用data-passurl

$('#button1').click(function() {
    var passurl = $(this).data('passurl'); // or $(this).attr('data-passurl');
    level2.load("http://hello/script.php?url=" + passurl);
});

Answer 2

为什么不在那里使用哈希...

<a href="#/poodles" class="button">Anatomical Pathology</a>

在你的剧本中

$(".button").each(function() {
  // get the hash and extract the part we want store it in this enclosure
  var url = $(this).attr("href").replace(/^#\//, "");
  // create a click handler that loads the url
  $(this).click(function() {
    level2.load("http://hello/script.php?url=" + url);
  });
});

这也带来了从中推断的可能性，以便通过url传递的哈希也可以运行脚本加载......

Answer 3

您可以使用rel attributte（或任何数据属性，如果您使用HTML5 Doctype）来保存您的URL并将类添加到您想要执行回调的链接。

<a href="#" class="button" rel="your-url">Anatomical Pathology</a>

你的回调：

$('a.button').click(function() {
    level2.load("http://hello/script.php?url=' + $(this).attr('rel') + '");
});

Answer 4

对于更具扩展性的解决方案，您可以考虑为您的网址制作json结构：

var urls = [{
    "poodle":{
        "url":"http://hello/script.php?url=poodle",
        "someOtherData":"data"
    },
    "otherDog":{
        "url":"http://hello/script.php?url=otherDog",
        "someOtherData":"data"
    }
}];

您可以在HTML元素中的某处存储某种键：

<a href="#" rel="poodle">Anatomical Pathology</a>

然后，您将在功能代码中利用此数据结构：

$('a').click(function () {
    var key = $(this).attr('rel');
    level2.load(urls[key].url);
});

Answer 5

根据Stuie，在链接中添加一个类，以便您可以同时将它们全部定位。但是，我没有看到需要愚弄哈希，我也不会添加一堆点击事件。只需委托一次即可完成：

<div id="wrapper">
  <a href="poodles" class="button">Poodles</a>
  <a href="schnausers" class= "button">Schnausers</a>
</div>

和JS：

$('#wrapper').delegate('a.button', 'click', function(e) {
  e.preventDefault();
  var passurl = $(this).attr("href");
  level2.load("http://hello/script.php?url=" + passurl); // assuming "level2" is valid from elsewhere  
});

如果我有“#wrapper”，您可以指定任何唯一的选择器，它是所有链接的祖先。它是一个元素，用于监听。中的a.button元素的点击。

Javascript - 如何最小化此代码示例？

5 个答案: