Таким образом, я использую функцию Ajax jQuery для чтения некоторого XML для меня, и это работало просто великолепно. Но теперь я пытаюсь управлять свойством дисплея 4 различных динамично сгенерированных отделений, когда mouseup инициирован от объектов опции. Размер и x/y отделений определяются XML и анализируются через.
Моя проблема заключается в том эти отделения или не сгенерирована или просто не обнаруживается в IE, Safari и Chrome. В Firefox и Opera, они действительно работают. Я использую .append jQuery () для создания отделений и затем .css () функция для управления ими. Смотря в инструментах разработчика Chrome, я вижу, что свойство CSS, изменяемое в сценарии, переопределяется свойством в таблице стилей. Кто-либо фиксирует?
Отделения создали здесь:
case "dynamic":
var n = name;
switch(portion){
case "stub":
$('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>");
break;
case "body":
$('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>");
break;
}
break;
case "static":
var n = name;
switch(portion){
case "stub":
$('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>");
break;
case "body":
$('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>");
break;
}
break;
Функции Mouseup, которые изменяют свойство дисплея:
$('#StubTemplates').find('.ddindent').mouseup(function(){
var tVal = $(this).val();
var tTitle = $(this).attr('title');
if(!stubActive){
$('.stubEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
stubActive = true;
}else{
$('.stubEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
stubActive = false;
}
});
$('#StubTemplates').find('#stubTempNone').mouseup(function(){
$('.stubEditable').css('display', 'none');
});
$('#BodyTemplates').find('.ddindent').mouseup(function(){
var tVal = $(this).val();
var tTitle = $(this).attr('title');
if(!bodyActive){
$('.bodyEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
bodyActive = true;
}else{
$('.bodyEditable').css('display', 'none');
$('#'+tVal).css('display', 'block');
bodyActive = false;
}
});
$('#BodyTemplates').find('#bodyTempNone').mouseup(function(){
$('.bodyEditable').css('display', 'none');
});
Поскольку в инструментах разработки вы можете видеть, что стиль правильно добавлен к элементу, проблема не столько в JQuery, сколько в каскаде CSS. Обычно все, что добавлено непосредственно к элементу, как этот, должно иметь приоритет, но есть исключения. Специфичность CSS может вызывать некоторую сбивающую с толку поведение.У вас есть что-то! Important, которое мешает?
Кроме того, поскольку вы скрываете и показываете с помощью display: block и display: none, убедитесь, что у вас нет параметра visibility: hidden в CSS, который будет отменен.
Кроме того, по какой причине вы не используете просто .show () и .hide () или .toggle () ? Вы также можете попробовать удалить классы, которые мешают, и настроить другие, используя .removeClass () , .addClass () или .toggleClass () .
Если ничего не помогает, вы всегда можете попробовать $ ('. BodyEditable'). Css ('display', 'none! Important') ;.
Я стараюсь избегать! Important, так как он вызывает столько головной боли ... но это указано в спецификации по определенной причине.
Итак, мне удалось решить проблему. Опции в меню выбора не вызывали mouseup, поэтому я использовал функцию .change() в меню выбора, используя селектор :selected, чтобы найти то, что было выбрано.
Большое спасибо Брэдли за то, что направил меня на правильный путь.