Question

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

这是实际用例的链接，注意没有异常的CSS在播放，列表没有浮动等等。我使用的是带有UI版本1.8.18的JQuery 1.7.1，带有默认打包的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>
...

Answer 1

我没有对此进行测试，但我认为这是因为您的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非常无情。

仅在IE7中出现JQuery列表/链接操作错误

1 个答案: