2012-04-11 5 views
1

次のコードを使用して、html内のフックを見つけ出し、そこからリンクを作成し、ポップアップを作成してポピュレートし、フック自体を非表示にします。 FF、Chrome、Safari、IE8、IE9では正常に動作しますが、IE7では失敗します。IE7でのJQueryリスト/リンク操作エラーのみ

ここには実際の使用状況へのリンクがあります。再生時に異常なCSSがないこと、リストがフローティングされていないなどです。JQuery 1.7.1をUIバージョン1.8.18で使用しています。ダイアログ:誰もが、私はこのエラーを閉鎖することができますどのように指摘することができれば

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

、私は非常に感謝されると思います。

(TinyMCEはによって生成された)元のHTML:IE7で

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

<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:HTMLで

$(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; 
}) 
}); 

所望の結果

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

答えて

2

私はこれをテストしなかったが、これはあなたのHTMLが間違っているからだと思う。 ololの有効な子要素ではなく、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を許していません。

+0

私はそれがTinyMCEによって生成されたことに気づいた理由は何ですか。私はこれを変更することができなくなります(少なくとも、私は考えることはできません*私はできます...)。 – Eamonn

+1

+1。セレクタ 'li:contains( '[popup]')'が親と子の 'li'の両方にマッチするので、OPはスクリプトを変更する必要があります。 –

+1

TinyMCEを更新し、ネストされたリストの不適切なHTML出力を修正する 'lists'プラグインを初期化しました(なぜこれがコアにないのですか?)。これは、JQueryを微調整して問題を解決しました。 – Eamonn