Question

我正在制作一个名为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语句，但如果有人帮忙，那就太好了。谢谢！：）

亲切的问候，森

Answer 1

使用：

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

Answer 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
    }

Answer 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);
}

Answer 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)
}

如何检测href是否是图像？

4 个答案: