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>

Jクエリ:

<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');
    //...
}

HTML5データを参照-JonResigによる属性

于 2012-12-21T14:56:36.550 に答える