0

当您单击页面上的标签时，我正在尝试显示一个灯箱。基本上，js 试图获取 href 并使用它来获取宽度。（在 js 和 jquery 方面不是最好的）所以任何帮助都会非常感激。

我得到的错误：

错误：语法错误，无法识别的表达式：#?w=500, a[name=?w=500] @ http://code.jquery.com/jquery-latest.js:4680

html

<a href="#?w=500" rel="diff" class="poplight">
      <h1 class="blue">diff</h1>
</a>
<div id="diff" class="popup_block">
   <p>text in light box</p>
</div>

查询：

<script type="text/javascript">
        $(document).ready(function() {
        //When you click on a link with class of poplight and the href starts with a # 
        $('a.poplight[href^=#]').click(function() {
            var popID = $(this).attr('rel'); //Get Popup Name
            var popURL = $(this).attr('href'); //Get Popup href to define size
            window.alert('2 test in the popup function ');
            //Pull Query & Variables from href URL
            var query= popURL.split('?');
            var dim= query[1].split('&');
            var popWidth = dim[0].split('=')[1]; //Gets the first query string value

            //Fade in the Popup and add close button
            $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close" style="float:right;">Close</a>');

            //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
            var popMargTop = ($('#' + popID).height() - 80) / 2;
            var popMargLeft = ($('#' + popID).width()) / 2;

            //Apply Margin to Popup
            $('#' + popID).css({
                'margin-top' : -popMargTop,
                'margin-left' : -popMargLeft
            });
            //Fade in Background
            $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
            $('#fade').css({'filter' : 'alpha(opacity=90)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=90)'}) is used to fix the IE Bug on fading transparencies 

            return false;
        });

        //Close Popups and Fade Layer
        $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
            $('#fade , .popup_block').fadeOut(function() {
                $('#fade, a.close').remove();  //fade them both out
            });
            return false;
        });
        });
    </script>
4

1 回答 1

1

这不是一个直接的答案，但您知道您可以创建自己的属性吗？

<a popupwidth="500" rel="diff" class="poplight">
    <h1 class="blue">diff</h1>
</a>

可以正常工作：

$('a.poplight[popupwidth]').click(function() {
    //...
    var popWidth = $(this).attr('popupwidth');
    //...
}

您的 HTML 编辑器可能会抱怨，但这是完全合法的 HTML，并且可以正常运行。如果您想符合 XML，您可以创建自己的 XML 模式并通过命名空间引用它。

架构

<?xml version="1.0" encoding="utf-8"?>
<xs:schema id="XhtmlAddons"
    targetNamespace="http://somekindofid/XhtmlAddons.xsd"
    elementFormDefault="qualified"
    xmlns="http://somekindofid/XhtmlAddons.xsd"
    xmlns:mstns="http://somekindofid/XhtmlAddons.xsd"
    xmlns:xs="http://www.w3.org/2001/XMLSchema">

    <xs:attribute name="popupwidth" type="xs:int" />

</xs:schema>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:addon="http://somekindofid/XhtmlAddons.xsd">
    <!-- ... -->
    <a addon:popupwidth="500" rel="diff" class="poplight">
        <h1 class="blue">diff</h1>
    </a>
    <!-- ... -->
</html>

jQuery*

$('a.poplight[addon\\:popupwidth]').click(function() {
    //...
    var popWidth = $(this).attr('addon\\:popupwidth');
    //...
}

但是请注意，jQuery 本身并不支持 XML 命名空间，因此如果您进行任何高级操作，您可能会遇到麻烦。上面的第一个示例（没有名称空间）是首选，除非您出于其他原因确实需要 XML 兼容性。

更新

如果您针对 HTML 5 进行验证，则不应使用该模式。只需在您的自定义属性前面加上“data-”：

HTML

<a data-popupwidth="500" rel="diff" class="poplight">
    <h1 class="blue">diff</h1>
</a>

jQuery

$('a.poplight[data-popupwidth]').click(function() {
    //...
    var popWidth = $(this).attr('data-popupwidth');
    //...
}

请参阅Jon Resig 的HTML 5 数据属性

于 2012-12-21T14:56:36.550 回答