2012-05-09 38 views
0

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.<a href> link with id

<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.

+0

あなたは 'href'属性を取得する方法を知りたいですか? –

+2

あなたは 'function myFunc(url)'のようなパラメータを持つ関数の中にjsコードを置くだけで、 '.load'の内部でそのURLを' .load(url) 'として使用し、必要なパラメータ。本当に基本的なものですが、より具体的にする必要があります。 –

+0

いいえ、私はjavscriptに追加の変数を渡したいと思います。例: Rodney

答えて

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> 
+1

jQuery 1.7以降、.live()メソッドは推奨されていません。 .on()を使用してイベントハンドラをアタッチします。 jQueryの古いバージョンのユーザーは、.live()よりも.delegate()を優先して使用する必要があります。 http://api.jquery.com/live/ – JFK

5

Couple points:

  1. The jQuery attr()メソッドを使用して変数を渡す必要があるJavaScriptは、任意の要素のhrefを含む任意の属性を取得するために使用できます。

  2. on()メソッドをjQuery 1.7+と併用すると、live()は推奨されなくなりました。

  3. <a>タグが複数ある場合は、IDの代わりにclassという名前を参照する必要があります。だからあなたは "。" "#"の代わりに使用します。あなたの場合、#selectorの代わりに.selectorになります。

  4. click関数内のステートメントの数を減らすには、同じ時間間隔、 500を持つ2つの fadeIn()の機能を組み合わせることができます。以下では、要素を区切るために "、"を使用します(この場合は .overlayInner.closepop)。

  5. ライトボックスに入っているので、リンクをクリックすると別のページに移動したくないという前提があります。このため、またはreturn false;のいずれかをの最後のの文をclickの機能の中に使用する必要があります。 eは、eventObjectanonymous'click', 'a.selector', function(e)に渡されます。

これはあなたのJavaScriptがどのように見えるかを示しています。

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; 
}); 
+1

もし ' 'があれば、javascript' this.href'を使って 'href'属性の値を取得することもできます:' .load( "' + this。 – JFK

+0

@JFKは、6番目の箇条書きに 'this'(ha!)をつけて動揺しました。うまくいけば、それはもう一つの答えから集められます。 –

関連する問題