JQuery и создание стилей, как проверить, если стиль уже существует - PullRequest
Новая
       21

JQuery и создание стилей, как проверить, если стиль уже существует

2 голосов
/ 17 февраля 2011

Привет, люди, которых я осмотрел, но не могу найти ответ, который искал.

У меня есть страница поиска, которая выполняет вызовы ajax, возвращает данные json, затем создает стиль на основе возвращенных данных.и добавляет его в раздел DOM.Создание стилей работает нормально, но если выполняется новый поиск, стиль дублируется, и поэтому моя функция $ (# element) .slidetoggle () дублируется, а слайд-тумблер открывается и закрывается сразу.

ypuможно увидеть страницу здесь: http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_jq_keys.php

(используйте в качестве тестовых данных hounslow, north london и from category: кладбища), если один и тот же поиск выполняется дважды, стили для результатов дублируются, и поведение переключателя слайдовдублируется.)

мой вопрос, как мне проверить, существует ли уже стиль.

скрипт, который создает стиль, выглядит следующим образом: 

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.
                    });
                });
            }
        });
    };

это строка кода, которая создает один из моих стилей: 

$("<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 будет достаточно для моих нужд.

1 Ответ

4 голосов
/ 17 февраля 2011

Вы можете использовать: содержит селектор. например: 

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"); 
}
...