javascript - 请帮我修复这个 Jquery 函数，并找出一个回退以防 Javascript 被禁用

Question

此代码应该从 ul 中间单击的 anchor 标记获取 ID，id 为“链接”，然后将该 ID 用于整个页面的其他目的，但是警报显示我一直在获取'undefined' 就像元素没有 id 一样。我仔细检查了我的源代码，它们确实有 ID，所以我不确定问题出在哪里。

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

Answer 1

你非常接近:

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

渲染页面时。