Question

我正在尝试从选择框中获取元素ID，然后使用：

滚动到该元素

// jump to services
$(function () {
    $("select.jump").change(function() {
        var selected = $(this).find("option:selected").val();
        console.log(selected);
        $('html, body').animate({
            scrollTop: $("#" + selected).offset().top
        }, 2000);
    });
});

console.log(selected)正确返回我的id，但是我得到的偏移是null。

在我的ID seletors中，它似乎是一个括号和斜线问题。

Answer 1

您提到您的ID中有括号和斜杠。

无论它们是方括号还是普通括号，括号在jQuery选择器中都有特殊含义。包括斜杠，你应该在你的HTML ID中完全避免它们。如果您参考W3C规范，它基本上是非法的ID。

jQuery选择器中的方括号属性相关。

jQuery选择器中的普通括号与过滤器相关。

请参阅jQuery选择器：http://api.jquery.com/category/selectors/

最典型的选择器与 CSS选择器基本相同，并且应遵循相同的命名约定：请参阅http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

这里我引用上面的W3C链接：

标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上连字符（ - ）和下划线（ _）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B＆amp; W？”可以写成“B \＆amp; W \？”或“B \ 26 W \ 3F”。

以下是演示此问题的演示：http://jsfiddle.net/terryyounghk/tkx36/

虽然您的脚本没有任何实质性错误，但安全网会很好：

// jump to services
$(function () {
    $("select.jump").change(function() {
        var selected = $(this).find("option:selected").val(),
            $selected = $("#" + selected);

        if ($selected.length) {
            $('html, body').animate({
                scrollTop: $selected.offset().top
            }, 2000);
        } else {
            // handle this in case element is not found
        }
    });
});

滚动到返回偏移量的元素null

1 个答案: