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

Question

a quick question.

At the moment I have 12 links on a page, and 12 corresponding javascript codes that run when a each button is clicked.

I know 100% there must be a method of having 1 javascript code and the link passing a variable to it, so I don't have to have 12 different codes.

EG. Here is a link I'm currently using:

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

And the Javascript function that is run when the link is clicked loads some html from a php script into a div which is previously defined as level2:

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

What I'd really like to do is something like this with the link:

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

And the function something like this, so I only need the 1 function not 12:

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

How do I go about getting the data from the link tag into javascript, and also how do I add this passed variable into the url I want the javascript to pull data in from?

Answer 1

passurl isn't standard attribute, you should use 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

Why don't you utilize your hash there...

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

In your script

$(".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);
  });
});

This also brings about the possibility to extrapolate from that so that a hash passed through the url can also operate the script loading...

Answer 3

You can use the rel attributte (or any data- attributes if your using HTML5 Doctype) to save your URL and add a class to the links you want to execute your callback.

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

Your Callback:

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

Answer 4

For a more extensible solution you could consider making a json structure for your urls:

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

You would store some sort of key somewhere in your HTML element:

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

Then you would leverage this data structure in your functional code:

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

Answer 5

As per Stuie, add a class to the links so that you can target them all at once. However, I don't see the need to fool with the hash, and I wouldn't add a bunch of click events either. Just delegate once and you're done:

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

and the 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  
});

Where I have "#wrapper" you would designate any unique selector that is an ancestor of all your links. It's an element that listens for clicks on the a.button elements within.