1

基本上我有一个 html 页面，上面有数百个图像，每个图像都有一个描述图像的标题属性。理想情况下，我会改变这一切，但页面必须保持原样。

如果可能，我想搜索这些标题属性并将页面滚动到相应的图像。- 我玩过一些 javascript 搜索脚本，但由于标签在代码中而不是在页面上显示，因此无法让它与简单的“页面上”搜索一起使用。

谁能指出我如何做这样的事情的正确方向？

这是我使用的“页面搜索”代码

var n = 0;
function findInPage(str) {
    var txt, i, found;
    if (str == "") {
        return false; 
    }
    // Find next occurance of the given string on the page, wrap around to the
    // start of the page if necessary.
    if (window.find) {
        // Look for match starting at the current point. If not found, rewind
        // back to the first match.
        if (!window.find(str)) {
            while (window.find(str, false, true)) {
                n++;
            }
        } else {
            n++;
        }
        // If not found in either direction, give message.
        if (n == 0) {
            alert("Not found.");
        }
    } else if (window.document.body.createTextRange) {
        txt = window.document.body.createTextRange();
        // Find the nth match from the top of the page.
        found = true;
        i = 0;
        while (found === true && i <= n) {
            found = txt.findText(str);
            if (found) {
                txt.moveStart("character", 1);
                txt.moveEnd("textedit");
            }
            i += 1;
        }
        // If found, mark it and scroll it into view.
        if (found) {
            txt.moveStart("character", -1);
            txt.findText(str);
            txt.select();
            txt.scrollIntoView();
            n++;
        } else {
            // Otherwise, start over at the top of the page and find first match.
            if (n > 0) {
                n = 0;
                findInPage(str);
            }
            // Not found anywhere, give message. else
            alert("Not found.");
        }
    }
    return false;
}
4

1 回答 1

1

您可以通过 html 属性进行选择。

使用纯 JS（在现代浏览器中，包括 IE8+）：

document.querySelectorAll('[title*="my text"]')

使用 jQuery：

$('[title*=my text]')

会发现：

<img src="/path" title="this is a title with my text" />

从那里，您需要获取选择器返回的图像的页面位置，然后将页面滚动到该点，可选地（可能）有一些偏移量，这样它就不会撞到视口的顶部

编辑：

function findElementsByTitle(str) {
    return document.querySelectorAll('[title*="' + str + '"]');     
}

function scrollToElement(el) {
    var yOffset = el.offset().top; //this is a jQuery method...you don't want to write this in plain JS
    window.scrollTo(0, yOffset - 10) //params are x,y. the - 10 is just so your image has some "padding" in the viewport

}
于 2012-12-21T16:32:39.480 回答