1

我使用以下代码在 html 中查找钩子，从中生成链接，创建和填充弹出窗口，然后将钩子本身隐藏起来。它在 FF、Chrome、Safari、IE8 和 IE9 中运行良好 - 但在 IE7 中失败。

这是实际用例的链接，注意没有异常的 CSS，列表没有浮动，等等。我使用 JQuery 1.7.1 和 UI 版本 1.8.18，对话框的默认打包 CSS：

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