2

こんにちは、私は周りを見回しましたが、探している答えが見つからないようです。

ajax呼び出しを行い、jsonデータを返し、返されたデータに基づいてスタイルを作成し、DOMのセクションに追加する検索ページがあります。スタイルの作成は正常に機能していますが、新しい検索が行われるとスタイルが複製されるため、私の $(#element).slidetoggle() 関数が複製され、slidetoggle がすぐに開閉します。

ypu はここでページを見ることができます: http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_jq_keys.php

(テスト データとして hounslow、north london およびカテゴリから使用: cemeteries) 同じ検索が 2 回行われると、結果のスタイルが複製され、スライド トグル動作が複製されます。)

私の質問は、スタイルが既に存在するかどうかを確認する方法です。

スタイルを作成するスクリプトは次のとおりです。

function makeCSS(id){
        var myUrl = 'getBoroughInfo.php';
        $.ajax({
            url: myUrl,
            type: 'POST',
            data: 'myID='+id,
            dataType: 'json',
            error: function(xhr, statusText, errorThrown){
                // Work out what the error was and display the appropriate message
            },
            success: function(myData){
                var items = myData.boroughs[0];
                //console.log('borough: '+myData.boroughs);

                $("<style type='text/css'> #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} </style>").appendTo("head");
                $("<style type='text/css'> #borough_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; } </style>").appendTo("head");
                $("<style type='text/css'> #searchHead_"+items.Borough_ID+"{ color:#000000; font-weight:bold; background-color:"+items.color+"; opacity: 1.0; cursor: pointer;} </style>").appendTo("head");
                //apply opacity
                //$('#borough_'+items.Borough_ID).css({});
                $('#borough_links').append('<div id="link_'+items.Borough_ID+'">'+items.Borough_Name+'</div>');
                $('#results').append('<div id="searchHead_'+items.Borough_ID+'">'+items.Borough_Name+'</div>');
                $('#results').append('<div id="borough_'+items.Borough_ID+'"></div>');
                $('#link_'+items.Borough_ID).live('click', function(){
                    $('#borough_'+items.Borough_ID).slideToggle('slow', function() {
                        // Animation complete.
                    });
                });
                $('#searchHead_'+items.Borough_ID).live('click', function(){
                    $('#borough_'+items.Borough_ID).slideToggle('slow', function() {
                        // Animation complete.
                    });
                });
            }
        });
    };

これは、私のスタイルの 1 つを作成するコード行です。

$("<style type='text/css'> #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} </style>").appendTo("head");

では、これがドキュメントに既に存在するかどうかを確認するにはどうすればよいですか???? 私のニーズには単純な if ステートメントで十分だと思います。

4

1 に答える 1

4

:contains セレクターを使用できます。例えば：

if($("style:contains('#link_" + items.Borough_ID + "')").length < 1)
{
    $("<style type='text/css'> #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} </style>").appendTo("head"); 
}
于 2011-02-17T17:40:27.857 に答える