Question

我使用下面的代码将外部页面加载到灯箱中。我怎么能从href标签，一个名为'page'的变量传递到包含page link ='country.php'值的javascript（第1行）。我想多次使用这个脚本调用，而不必为每个链接添加额外的javascript行。

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

非常感谢任何帮助。

Answer 1

情侣点：

jQuery attr()方法可用于获取任何元素上的任何属性，包括href。
将on()方法与jQuery 1.7+一起使用，因为live()已被弃用。
如果您有多个<a>代码，则需要引用class名称而不是ID。所以你会使用＆＃34;。＆＃34;而不是＆＃34;＃＆＃34;。在您的情况下，它将是.selector而不是#selector。
要减少click函数中的语句数，可以组合具有相同时间间隔fadeIn()的两个500函数。请注意，您将使用＆＃34;，＆＃34;分隔元素，在本例中为.overlayInner和.closepop。
由于您位于灯箱中，因此假设您在单击链接时不希望迁移到其他页面。因此，您需要在e.preventDefault函数中使用return false;或click作为 last 语句。 e，eventObject传递给anonymous '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;
});

Answer 2

试试这个：

$("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>

如果您想获得“国家/地区”的内部文字或您可以执行的图片：

$("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>

Javascript需要使用<a href=""> link with id</a>传递变量

2 个答案: