Jquery — управление свойствами CSS элементов в соответствии со свойствами CSS других элементов
Как изменить свойства CSS элементов в соответствии со свойствами CSS других элементов? Например; Я хочу изменить положение «bigbutton» по умолчанию, если цвет «div1» черный. Это то, что я пробовал:
HTML
<div> <div class = "div1"> </div> <div class = "div2"></div> <div class = "div3"></div> <button type = "button" class = "bigbutton">bigbutton </button> </div>
CSS
.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; } .div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; } .div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal; .bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }
JQUERY
$(document).ready(function(){ $('.div1').mouseenter(function(){ $(this).css('background','black'); }); $('.div1').mouseleave(function(){ $(this).css('background',''); }); $('.div2').mouseenter(function(){ $('.div1').css('background','yellow'); }); $('.div2').mouseleave(function(){ $('.div1').css('background',''); }); $('.div3').mouseenter(function(){ $('.div1').css('background','black'); }); $('.div3').mouseleave(function(){ $('.div1').css('background',''); }); if ($('.div').css('background') == 'black'){ $('.bigbutton').css('left','200px'); } else{ $('.bigbutton').css('left','100px'); } });
Можно ли это сделать без if-else? PS: Приношу извинения за проблему с форматированием, так как почти невозможно правильно отформатировать на моем телефоне. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Когда вы говорите «изменить x на y», вы в основном описываете условное выражение if.
Учитывая ваш пример, вы также можете получить желаемый результат, изменив положение кнопки в том же блоке кода, где div1 становится черным: https://codepen.io/pen/RvXQMP
Обновлять
Чтобы получить желаемый результат для любого ввода, который изменил бы цвет div1, вы можете использовать Наблюдатель мутаций, работает как eventListener для изменений DOM: https://codepen.io/pen/PVMVzw
Моя ошибка, я должен был быть более конкретным. Положение bigbutton не должно меняться при входе мыши в div1, а только когда цвет черный. Потому что, если мы добавим больше элементов, которые меняют цвет div1 на черный, большая кнопка должна изменить свое положение. Я отредактировал код, чтобы лучше объяснить сценарий.
Обновленный ответ с решением для каждого изменения, из-за которого div1 имеет черный фон, надеюсь, это поможет.
Это то, чего я точно хотел. Спасибо.
прежде всего вам нужно получить цвет bigbutton
var color = $('.bigbutton').css('color');
тогда проверь
if (color == "red"){ //example
$('.div1').css('top':'10px') // finally do your changes [for example]
}
вы можете попробовать, html-код:
<div id = "container">
<div class = "div1"> </div>
<div class = "div2"></div>
<div class = "div3"></div>
<button type = "button" class = "bigbutton">bigbutton </button>
</div>
css-код:
.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; }
.div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; }
.div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal;}
.bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }
javascript-код:
container.onmouseover = container.onmouseout = handler;
function handler(event){
if (event.type == 'mouseover') {
if (event.target.className=='div1'){
event.target.style.background = 'black';
moveLeft();
}
if (event.target.className=='div2'){
document.getElementsByClassName('div1')[0].style.background = 'yellow';
}
if (event.target.className=='div3'){
document.getElementsByClassName('div1')[0].style.background = 'black';
moveLeft();
}
}
if (event.type == 'mouseout') {
if (event.target.className=='div1'){
event.target.style.background = '';
}
if (event.target.className=='div2'){
document.getElementsByClassName('div1')[0].style.background = '';
}
if (event.target.className=='div3'){
document.getElementsByClassName('div1')[0].style.background = '';
}
moveRight();
}
}
function moveLeft(){
$('.bigbutton').css('left','200px');
}
function moveRight(){
$('.bigbutton').css('left','100px');
}
Здравствуйте, спасибо, что нашли время ответить. Этот метод работает очень хорошо, но он немного отличается от того, что я хотел.
Почему бы вам не поместить эти другие свойства CSS в обработчики событий мыши? Обратите внимание, что переключение класса также может сделать это проще и использовать правила CSS, основанные на классе.