Javascript 确定特定图像/链接是否位于页面上

Javascript 确定特定图像/链接是否位于页面上,javascript,greasemonkey,userscripts,Javascript,Greasemonkey,Userscripts,我正在尝试创建一个onkeydown事件,该事件将自动将特定站点上的图像库移动到下一个图像或返回。问题是,链接结构的构造效率不高 因此,基本上,我试图在用户脚本中找到页面上是否存在要单击以返回或前进的图像,并使用if语句来确定是否可以实际执行后退/前进操作(分别是键盘上的左箭头/右箭头) 如何确定页面上是否存在所述图像?假设您使用的是jquery,简单如下: $('img[src="/path/to/left-arrow-picture.jpg"]') 可以,或者如果他们有特定的职业 $('i

我正在尝试创建一个
onkeydown
事件,该事件将自动将特定站点上的图像库移动到下一个图像或返回。问题是,链接结构的构造效率不高

因此,基本上,我试图在用户脚本中找到页面上是否存在要单击以返回或前进的图像,并使用if语句来确定是否可以实际执行后退/前进操作(分别是键盘上的左箭头/右箭头)


如何确定页面上是否存在所述图像?

假设您使用的是jquery,简单如下:

$('img[src="/path/to/left-arrow-picture.jpg"]')
可以,或者如果他们有特定的职业

$('img.prevclass')
如果你只使用纯javascript,你可以用

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
   if (i.src == '/path/to/left-arrow-picture.jpg') {
       ...
   }
}
var-imgs=document.getElementsByTagName('img');
对于(变量i=0;i
通常一个图库的所有图像都保存在一个数组中,因此一个典型的行为是循环,因此当它位于最后一个图像时,用户希望转到下一个图像,图库将转到第一个,反之亦然,例如

var currentImage=0;
var numberOfImages=imageArray.length;
如果(){
currentImage=++currentImage%numberOfImages;
}如果(){
currentImage=(-currentImage+numberOfImages)%numberOfImages;
}
我不知道您是如何实现这个库的,但是您应该能够以某种方式应用上述逻辑

提醒您,如果您正在查找具有特定
src
值的图像,请按照MarcB的建议对其进行循环。请注意,不需要
getElementsByTagName
,有一个集合已准备就绪


还请注意,在某些浏览器中,
src
属性将是完整路径,但在其他(较旧)浏览器中,仅是属性值。因此最好只匹配实际图像名称。

首先,确定图像的CSS路径或
src
属性。(如果站点使用精灵,
src
可能不存在。或者,它可能不是唯一的。)

您可以右键单击图像并选择检查元素,然后使用开发工具或Firebug帮助确定这一点。
如果您需要我们帮助选择选择器,请链接到目标页面,或粘贴适当的HTML片段

然后您可以使用如下代码:

普通javascript:

var lftArrwImg  = document.querySelector ("img[src='/some_path/left_arrow.gif']");
if (lftArrwImg) {
    // DO YOUR LEFT ARROW STUFF HERE.
}
if ( $("img[src='/some_path/left_arrow.gif']").length ) {
    // DO YOUR LEFT ARROW STUFF HERE.
}
  • 或:

    var lftArrwImg  = document.querySelector ("img[src='/some_path/left_arrow.gif']");
    if (lftArrwImg) {
        // DO YOUR LEFT ARROW STUFF HERE.
    }
    
    if ( $("img[src='/some_path/left_arrow.gif']").length ) {
        // DO YOUR LEFT ARROW STUFF HERE.
    }
    

jQuery:

var lftArrwImg  = document.querySelector ("img[src='/some_path/left_arrow.gif']");
if (lftArrwImg) {
    // DO YOUR LEFT ARROW STUFF HERE.
}
if ( $("img[src='/some_path/left_arrow.gif']").length ) {
    // DO YOUR LEFT ARROW STUFF HERE.
}
  • 或:

    var lftArrwImg  = document.querySelector ("img[src='/some_path/left_arrow.gif']");
    if (lftArrwImg) {
        // DO YOUR LEFT ARROW STUFF HERE.
    }
    
    if ( $("img[src='/some_path/left_arrow.gif']").length ) {
        // DO YOUR LEFT ARROW STUFF HERE.
    }
    


请注意,某些网站可能会始终显示图像,但在不适用时将其隐藏。

这是一个
userscripts
问题,因此OP没有实现图库,可能无法控制目标页面。目前的问题是,唯一的浏览器应该是Chrome(如果错误标记,则为Firefox)。对于其他浏览器,如Opera,OP通常足够精明,可以说明这是错误的标记,它还包括FFox。