代码之家 › 专栏 › 技术社区 › Mathias Schnell

请帮助我修复这个jquery函数,并在禁用javascript的情况下找出一个回退。

fallback css html jquery javascript

Mathias Schnell · 技术社区 · 16 年前

这个代码应该从一个带有id“links”的ul中间的一个点击锚标记中获取id,然后在整个页面中使用这个id进行其他用途,但是警报显示我一直得到“undefined”,就像元素没有id一样。我仔细检查了源代码,它们确实有id,所以我不确定我的问题是什么。S.

$(function() {      
    $('ul#links > li > a').click(function() {

        var planet = $(this).id;
        alert(planet);
        $('#planet').removeClass();
        $('#planet').addClass('planet');

        var bg = 'black url(../img/' + planet + '.jpg) fixed no-repeat center';
        alert(bg);
        $('body').css('background', bg);
    });             
});

另外,jquery函数也被用作处理这种情况的javascript方法。我已经实现了一个PHP解决方案,它涉及到重定向到一个设置cookie并将用户返回到上一页的快速脚本,然后使用cookie加载新的CSS。在禁用JS的情况下,是否可以使用该方法作为JS方法的备份?

页面- http://schnell.dreamhosters.com/folio/

3 回复 | 直到 16 年前

cletus 16 年前

你非常接近:

$(function() {      
  $('ul#links > li > a').click(function() {
    var planet = this.id;
    $('#planet').removeClass().addClass("plane");
    var bg = 'black url(../img/' + planet + '.jpg) fixed no-repeat center';
    $('body').css('background', bg);
    return false;
  });             
});

首先, this.id 将获取ID。jquery选项是 $(this).attr("id") .

第二,你可以用链子 addClass() 和 removeClass() 保存两次查找元素。这对你的问题来说不是必要的,但却是很好的实践。

第三,除非您希望您的链接遍历某个地方,否则您需要阻止默认操作(通过调用 evt.preventDefault() 在传递给回调的事件对象上)或以 return false; (也可以 evt.stopPropagation() )

最后,您所做的非常适合禁用JavaScript,因为您可以转到执行相同操作的页面。我不会费心设置cookie和重定向。如果脚本名称uri为 /view/planet.php 这样做:

<a id="saturn" href="/view/planet.php?planet=saturn">Saturn</a>

在同一个脚本中,您可以执行以下操作(我假设这里是php;我没有看到您使用什么):

$planets = array(...);
$planet = $_GET['planet'];
if (in_array($planet, $planets)) {
  echo <<<END
<style type="text/css">
body { background: black url(.../img/$planet.jpg) fixed no-repeat center; }
</style>
END;
}

在呈现页面时。

Teja Kantamneni 16 年前

$(this).id 问题是…使用 $(this).attr('id')

Guffa 16 年前

您正在从元素创建一个jquery对象,并尝试从中获取ID。如果您使用attr方法,它是可以的,但是您应该只从元素本身获取ID:

var planet = this.id;

至于备份方法,这听起来似乎是合理的。但是,我不链接到其他页面,而是使用一个确定要显示内容的查询字符串链接到同一个页面。