如何检测href是否是图像？答案

【问题标题】：How to detect if the href is an image?如何检测href是否是图像？
【发布时间】：2011-07-25 11:17:33
【问题描述】：

我正在制作一个名为 WowBox 的灯箱插件。

现在，如果你想弹出一个 div，你可以使用这个：

<a href="#element" rel="wowbox" title="Title">Open #element in WowBox</a>

要弹出图像，请使用以下命令：

<a href="image.jpg" rel="wowbox[img]" title="Caption">Open image in WowBox</a>

现在，这是它的 jQuery：

<script type="text/javascript">
  // Copyright © 2011 Nathan Johnson. All Rights Reserved.

  jQuery.fn.center = function() {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.height()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.width()) / 2) + $(window).scrollLeft() + "px");
    return this;
  }
  jQuery.fn.close = function() {
      $(this).click(function() {
      $('#lb-caption').slideUp(700);
      $('#lb-title').slideUp(700);
      $('#lightbox-container').fadeOut(600);
      $('#lightbox-overlay').delay(100).fadeOut(600);
      });
      }
    function ImgError(source){
    var errorMssg = "<div style='color:red;text-align:center;'>Error: The requested image wasn\'t found.</div>";
    $(this).hide();
    $('#lb-caption').hide();
    $('#lb-content').html(errorMssg);
    return true;
}

    $(document).ready(function() {
    $('#lightbox-container').center();
    window.onresize = function(event) {
    $('#lightbox-container').center();
    }

    $(document.createElement("div")).attr("id","lightbox-holder").prependTo("body"); 
    //The HTML of WowBox will be placed right after the starting <body> tag once the page is loaded.
    $('#lightbox-holder').html(' \
    <div id="lightbox-overlay"></div> \
    <div id="lightbox-container"> \
    <div id="lb-title"></div> \
    <div id="lightbox"> \
    <div id="close-lb"></div> \
    <div id="lb-content"></div> \
    </div> \
    <div id="lb-caption"></div> \
    </div>');
    $('a[rel="wowbox"]').click(function() {
    var element = $(this).attr('href');
    var content = $(element).html();
    var title = $(this).attr('title');
    var lightboxContainer = "'#lightbox-container'";
    $('#lb-content').ready(function() {
        $('#lightbox-container').center();
      });
    $('#lightbox-overlay').fadeIn(700);
    $('#lightbox-container').center().delay(100).fadeIn(700);
    $('#lb-caption').html('');
    $('#lb-content').html(content);
    $('#lb-title').html(title).fadeIn(700);
    return false;
  });
  $('a[rel="wowbox[img]"]').click(function() {
    var src = $(this).attr('href');
    var caption = $(this).attr('title');
    var lightboxContainer = "'#lightbox-container'";
    var content = "'#lb-content'";
    $('#lightbox-container').center();
    $('#lightbox-overlay').fadeIn(700);
    $('#lightbox-container').delay(100).fadeIn(700);
    $('#lb-title').html('').show();
    $('#lb-content').html('<img onload="$('+lightboxContainer+').center();" src="'+src+'" onerror="ImgError(this)" onmousedown="return false;" /><div onmousedown="return false;" id="image-cover"></div>');
    $('#lb-caption').html(caption).fadeIn(700);
    return false;
  });
      $('#close-lb').click(function() {
      $('#lb-caption').slideUp(700);
      $('#lb-title').slideUp(700);
      $('#lightbox-container').fadeOut(600);
      $('#lightbox-overlay').delay(100).fadeOut(600);
      });
      $(document).keypress(function(event) {
      if (event.keyCode == 27) {
      $('#lb-caption').slideUp(700);
      $('#lb-title').slideUp(700);
      $('#lightbox-container').fadeOut(600);
      $('#lightbox-overlay').delay(100).fadeOut(600);
    }
      });
  });
  </script>

现在我只需要一种方法来检测 a 标签的 href 是图像还是 div。所以我可以只使用$('a[rel="wowbox"]').click() 而不是同时使用两者。我知道这可能会包含一个 if/else 语句，但如果有人帮忙，那就太好了。谢谢！ :)

亲切的问候，内森

【问题讨论】：

标签： javascript jquery plugins

【解决方案1】：

用途：

if(/\.(?:jpg|jpeg|gif|png)$/i.test($(this).attr('href'))){
  //do what you want
}

【讨论】：

谢谢！这看起来会奏效。我将尝试所有这些答案。

【解决方案2】：

if($(this).attr('href').indexOf('.jpg') > 0) // or any other extension
{
    //do what you want
}

你也可以反过来：

if(!$(this).attr('href').indexOf('#') >= 0) // or any other extension
    {
        //do what you want
    }

【讨论】：

请将$(this).attr(href) 替换为更短、更简单、更高效的this.href。
如果图片 URL 中有一个“#”怎么办？它还能正常工作还是会搞砸？
如果图片 url 中有 # 是真的，它不会正常工作，但是你正在编写 html 你在图片 url 中使用 # 吗？

【解决方案3】：

您可以猜测，如果它以代表图像格式（例如 jpg、jpeg、gif 等）的扩展名结尾，则它链接到图像。但你真的不知道。 URL（页内锚点除外）是供服务器解释的，而不是供客户端解释的。

您最好将图像链接赋予与元素不同的类，然后您可以这样做（假设代码位于 this 引用元素的侦听器函数中）：

var imageClass = 'imageLink';
var elementClass = 'elementLink';

if (hasClass(this, imageClass)) {
  // it's a link to an image
} else if (hasClass(this, elementClass)) {
  // it's a link to an element
} else {
  // it really is a link
}

一个简单的hasClass函数是：

function hasClass(el, cName) {
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

【讨论】：

谢谢，但 Facebox jQuery 灯箱插件以某种方式检测图像，但我无法让他们的代码与我构建的方式一起使用。

【解决方案4】：

我会说如果元素不存在，它一定是图像。

if($("image.jpg").length === 0) {
    // it's an image (probably always the case since an
    // 'image' element does not exist)
}

if($("#element").length === 0) {
    // it's an image (not the case if there is a element
    // with ID 'element' in the DOM)
}

【讨论】：