1

次のコードを使用して、html内のフックを検索し、それらからリンクを生成し、ポップアップを作成してデータを入力し、フック自体を非表示にします。FF、Chrome、Safari、IE8、IE9では正常に動作しますが、IE7では失敗します。

これが実際のユースケースへのリンクです。異常なCSSが機能していない、リストがフロートされていないなどに注意してください。ダイアログにデフォルトのパッケージ化されたCSSを使用してUIバージョン1.8.18でJQuery1.7.1を使用しています。

http://databizsolutions.ie/contents/page.php?v=35&u=admin-videos#a

誰かが私がこのエラーを閉じる方法を指摘することができれば、私は非常に感謝するでしょう。

元のHTML（TinyMCEによって生成された）：

<h3>Title of list</h3>
<ol>
    <li>Call to  action 1</li>
    <ol>
        <li>[popup]path/to/file1.mp4</li>
    </ol>
<li>Call to  action 2</li>
    <ol>
        <li>[popup]path/to/file2.mp4</li>
    </ol>
<li>Call to  action 3</li>
    <ol>
        <li>[popup]path/to/file3.mp4</li>
    </ol>
...

JQuery：

$(document).ready(function(){

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {
    var nextnumber = num++;

    //add a general and a unique class to the list item containing the hook
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);

    //Split on the hook, and save remainder of text (the path to file) as the 'path' attr
    var splitpath = $(this).text().split("[popup]");
    $(this).attr("path", splitpath[1]); 
    var path = $(this).attr("path");
    //alert($(this).attr("path"));

    //Get the previous list item (the call to action), and give it general and unique classes also.
    $thisArrow = $(this).parent().prev();
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

    //Make the call to action an anchor link, with a general class identifier.
    $thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>');

    //hide hooks
    $('li.popup').parent().hide();
});

$('.opener').click(function() {
    var Header = $(this).text();
    var popupURL = $(this).attr("path");
    var popupBG = "../contents/css/images/white-nontrans.jpg";

    var thisDialog = $('<div></div>')
        .html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420"><param name="movie" value="../mediaplayer/player.swf"><param name="autostart" value="true"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#FFFFFF"><param name="wmode" value="opaque"><param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '"><embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" autostart="true" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" /></object>')

    .dialog({ close: function() { $(this).html(''); },autoOpen: false, title: Header, modal: true, maxHeight: 500, width:580 });
    thisDialog.dialog('open');
    return false;
})
});

HTMLでの望ましい結果：

<h3>Title of list</h3>
<ol>
    <li class="arrow arr0">
        <a class="opener" title="Click to view video" path ="path/to/file1.mp4" >
           Call to  action 1
        </a>
    </li>
    <li class="arrow arr1">
        <a class="opener" title="Click to view video" path ="path/to/file2.mp4" >
           Call to  action 2
        </a>
    </li>
    <li class="arrow arr2">
        <a class="opener" title="Click to view video" path ="path/to/file3.mp4" >
           Call to  action 3
        </a>
    </li>
...

IE7の場合：

<h3 class="arrow arr0 arr2 arr4 arr6 arr8 arr10">Title of list</h3>
<a class="opener" title="Click to view video" path ="path/to/file1.mp4" >
    <a class="opener" title="Click to view video" path ="path/to/file2.mp4" >
        <a class="opener" title="Click to view video" path ="path/to/file3.mp4" >
<ol>
    <li>Call to  action 1</li>
    <ol>
        <li>[popup]path/to/file1.mp4</li>
    </ol>
<li>Call to  action 2</li>
    <ol>
        <li>[popup]path/to/file2.mp4</li>
    </ol>
<li>Call to  action 3</li>
    <ol>
        <li>[popup]path/to/file3.mp4</li>
    </ol>
...
4

1 に答える 1

2

私はこれをテストしていませんが、これはHTMLが正しくないためだと思います。olの有効な子要素ではなく、。olのみliです。HTMLは次のようになります。

<h3>Title of list</h3>
<ol>
    <li>
        Call to  action 1
        <ol>
            <li>[popup]path/to/file1.mp4</li>
        </ol>
    </li>
    <li>
        Call to  action 2
        <ol>
            <li>[popup]path/to/file2.mp4</li>
        </ol>
    </li>
    <li>
        Call to  action 3
        <ol>
            <li>[popup]path/to/file3.mp4</li>
        </ol>
    </li>
</ol>

IEは不正な形式のHTMLを非常に容赦しません。

于 2012-04-11T10:32:38.457 に答える