Javascript需要使用<a href>ID链接</a>传递变量

Question

I am using the code below for loading an external page into a lightbox. How could I pass from the href tag, a variable named 'page' to the javascript (line 1) containing the value of a page link = 'country.php'. I am wanting to use this script call several times without having to have additional javascript lines for each link.

<script>
$("a#selector").live("click", function(){$(".overlayInner").load("/country.php"); })
$("a#selector").live("click", function(){$(".overlayOuter").fadeIn(300); })
$("a#selector").live("click", function(){$(".overlayInner").fadeIn(500); })
$("a#selector").live("click", function(){$(".closepop").fadeIn(500); })
</script>


<a id="selector" href="#"><img src="/images/somegraphic.gif"></a>

Any help is much appreciated.

Answer 1

Couple points:

1. The jQuery attr() method can be used to get any attribute, including the href , on any element.

2. Use the on() method with jQuery 1.7+ as live() is deprecated.

3. If you will have multiple <a> tags, you will need to refer to a class name instead of an ID . So you would use a "." instead of a "#". In your case, it would be .selector instead of #selector .

4. To reduce the number of statements inside the click function, you can combine the two fadeIn() functions that have the same time interval, 500 . Note below that you would use a "," to separate elements, in this case, .overlayInner and .closepop .

5. Since you are in a lightbox, the assumption is you will not want to migrate away to another page when you click the link. For this reason, you will need to use either e.preventDefault or return false; as the last statement inside the click function. The e , would be the eventObject passed into the anonymous 'click', 'a.selector', function(e) .

Taken together, this is how your javascript could look.

var href=$("a.selector").attr('href', 'country.php');

$(document.body).on("click", "a.selector", function(){
    $(".overlayInner").load("'+href+'");
    $(".overlayOuter").fadeIn(300); 
    $(".overlayInner, .closepop").fadeIn(500); 
    return false;
});

Answer 2

Try this:

$("a.selector").live("click", function() {
    var url = $(this).attr('href'); 
    $(".overlayInner").load(url);
    return false;
});

<a class="selector" href="/country.php">Country</a>
<a class="selector" href="/pigs.php">Pigs</a>

If you want to get the inner text that says "Country", or an image you can do:

$("a.selector").live("click", function() {
    var url = $(this).attr('href'); 
    var img = $(this).html(); // But what do you want to do with it?
    $(".overlayInner").load(url);
    return false;
});

<a class="selector" href="/country.php"><img src="img.jpg" /></a>