0

ユーザーがページ上の画像またはリンクをクリックしたときにモーダル（オーバーレイ）がポップアップするはずのページがあります。ページが最初に読み込まれるとき、モーダルは空白であり、次のhtmlで非表示になっています。

<!--// MODAL: ITEM PROFILE //-->
<div id="profile" class="modal" style="visibility: hidden">
</div>
<!--// OVERLAY //-->
<div id="overlay" style="visibility: hidden"></div>

ユーザーが画像またはリンクをクリックすると、モーダルは次の関数を使用してトリガーされることになっています。

function itemModal(id){
var modal = $("#profile");
if (modal == null){
    alert("Modal not found!");
}

if($(" #profile").style.visibility == "hidden"){
    $.ajax
      (
        { //Ajax call to get item data
          type: "POST",
          url: "/organizer/getItem",
          data: { item_id: id },
          dataType: "html",
          success: function( responseText, textStatus, XHR )
          {
            // select the element with the ID profile and insert the HTML
            $("#profile" ).html( responseText );
            $("#profile").style.visibility = "visible";
            $("#overlay").style.visibility = "visible"
          }
        }
      );
  }
  else{ //Modal is being displayed, hide it and remove contents
    $("#profile").html('');
    $("#profile").style.visibility = "hidden"; 
    $("#overlay").style.visibility = "hidden";
  }
}

ただし、クリックしてモーダルをトリガーすると、エラーメッセージが表示されますUncaught TypeError: Cannot read property 'visibility' of undefined。私はこれをキャッチしようとアラートを入れましたが、プロファイル要素は存在しますが、インラインcssが定義されていても、別のファイルに約250行あるにもかかわらず、スタイルは明らかにそうではないことがわかりました。style属性がnullとして表示されるのはなぜですか？

4

3 に答える 3

6

jQuery オブジェクトは DOM オブジェクト (スタイル プロパティを持つ) の配列であるため、スタイル プロパティはありません。

次のいずれかが必要です。

SET: $('#overlay').css('visibility', 'hidden')
GET: $('#overlay').css('visibility')

また

SET: $('#overlay')[0].style.visibility = 'hidden'
GET: $('#overlay')[0].style.visibility
于 2012-07-01T19:57:32.963 に答える
1

jQuery とネイティブ JavaScript を混在させています。

ネイティブ HTML 要素にはstyleオブジェクトがありますが、jQuery でラップされた要素にはありません。jQueryを使いたい場合は、

if ($(" #profile").css('visibility') == "hidden")

また、次の行は意図したとおりに機能しません。

if (modal == null){

...に割り当てられた値modalが再び jQuery でラップされた要素であるためです。jQuery オブジェクトは、要素の一致に失敗した場合でも、評価時に常に「真の」値を持ちます。つまり、null、false、またはその他の偽の値に評価されることはありません。代わりに次を使用します。

if (modal.length){

...つまり、「jQuery セレクターが要素を見つけた場合...」

最後に、よりマイナーな点として、本当の意味でモーダル ウィンドウを扱っているわけではありません。これは DHTML です。モーダル ウィンドウは、親アプリケーション (アラートなど) に戻ることが許可される前に、ユーザーが対話する必要がある下位レベルのブラウザー機能の形式です。

于 2012-07-01T19:59:08.323 に答える
1

返された jQuery オブジェクトで Javascript の raw Element プロパティを使用していて、それが機能しない場合は、css()代わりにメソッドを使用する必要があります。

if($("#profile").css('visibility') == "hidden")
于 2012-07-01T19:58:03.917 に答える