Question

我想点击页面上的标签时显示一个灯箱。基本上它是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>

Jquery的：

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

Answer 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 Schema并通过命名空间引用它。

<强>模式

<?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 data- Attributes

试图制作灯箱，获取Jquery语法错误

1 个答案: