Question

我正在尝试创建一个onkeydown事件，它会自动将特定网站上的图片库移动到下一个图片，或者返回。问题是，链接结构没有有效结构化。

所以基本上，我试图在用户脚本中找到你要点击返回或前进的图像是否存在于页面上，带有if语句，以确定是否有后退/前进动作（左箭头/实际上可以完成键盘上的右箭头。

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

Answer 1

假设你正在使用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') {
       ...
   }
}

Answer 2

通常画廊的所有图像都保存在一个数组中，所以典型的行为是循环播放，所以当它在最后一个图像上并且用户想要转到下一个图像时，画廊会转到第一个， 反之亦然，例如

var currentImage = 0;
var numberOfImages = imageArray.length;

if ( <user wants next image> ) {
  currentImage = ++currentImage % numberOfImages;

} else if ( <user wants previous image> ) {
  currentImage = (--currentImage + numberOfImages) % numberOfImages; 
}

我不知道您是如何实施图库的，但您应该能够以某种方式应用上述逻辑。

警告，如果您正在寻找具有特定src值的图像，请按照MarcB的建议对其进行循环。请注意，您无需getElementsByTagName，即可收集document.images个收藏品。

另请注意，在某些浏览器中，src属性将是完整路径，但在其他（较旧）浏览器中只是属性值。所以最好只匹配实际的图像名称。

Answer 3

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

您可以右键单击图像并选择 检查元素 ，然后使用开发工具或Firebug来帮助确定这一点。
如果您希望我们帮助选择选择器，请链接到目标页面，或粘贴到相应的HTML代码段中。

然后你可以使用这样的代码：

普通javascript：

var lftArrwImg  = document.querySelector ("#galleryControls div.foo a img");
if (lftArrwImg) {
    // 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. }

的 jQuery的：

if ( $("#galleryControls div.foo a img").length ) { // DO YOUR LEFT ARROW STUFF HERE. }

或

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

请注意，某些网站可能始终存在图片，但在不适用时会将其隐藏。

确定特定图像/链接是否在页面上

3 个答案: