【发布时间】：2011-02-17 17:36:00
【问题描述】：
大家好，我环顾四周，但似乎找不到我正在寻找的答案。
我有一个搜索页面，它进行 ajax 调用，返回 json 数据，然后根据返回的数据创建样式并将其附加到 DOM 部分。 样式的创建工作正常，但是如果进行新的搜索，样式会被复制，因此我的 $(#element).slidetoggle() 函数会被复制，并且 slidetoggle 会立即打开和关闭。
你可以在这里看到页面：http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_jq_keys.php
（用作测试数据 hounslow，北伦敦和来自类别：墓地） 如果进行两次相同的搜索，结果的样式就会重复，并且滑动切换行为也会重复。）
我的问题是如何检查样式是否已经存在。
创建样式的脚本如下：
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 语句就足以满足我的需求。
【问题讨论】：
-
给样式标签一个ID，检查这个ID的元素是否存在。但是为什么要动态添加样式呢？如果您可以控制 HTML，为什么不直接添加样式？
-
此外，
items.Borough_ID对于每个请求是否总是不同的？如果不是，那就是你的问题。 -
嘿菲利克斯，感谢您的回复，样式是动态添加的，因为数据库中有很多项目属于一个自治市镇，每个自治市镇都有不同的颜色，并且是很多颜色，因此更容易根据需要生成样式，cybernates 用下面的代码示例回答有助于解决问题。虽然你的回答也可以，所以已经增加了你的回复，谢谢你的意见