Как изменить стиль .box1, нажав .box3?

$(function() {
  $(".box3").click(function() {
    $(this).parents().find('.box1').css('border', '1px solid red');
  });
})();
.container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid green;
}

.box1 {}
<div class="container">
  <div class="box box1">Box1</div>
  <div class="box box2">Box2
    <div class="box3">Box 3</div>
  </div>
</div>
0
dragonfly 30 Авг 2017 в 18:58

3 ответа

Лучший ответ

Вы можете использовать методы parent() и prev() jQuery, как показано в примере ниже.

< Сильный > Пример:

$(function() {
  $(".box3").click(function() {
    $(this).parent().prev('.box1').css('border', '1px solid red');
  });
});
.container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid green;
}

.box1 {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1">Box1</div>
  <div class="box box2">Box2
    <div class="box3">Box 3</div>
  </div>
</div>
1
John R 30 Авг 2017 в 16:54

Используйте parent() без s

$(function(){
    $(".box3").click(function() {
        $(this).parent().parent().find('.box1').css('border', '1px solid red');
    });
})();

Или используйте parents с selector аргументом parents('.container')

$(function(){
    $(".box3").click(function() {
        $(this).parents('.container').find('.box1').css('border', '1px solid red');
    });
})();
0
jperelli 30 Авг 2017 в 16:03

Если вы хотите сделать это только с помощью Javascript ....

var box3Div = document.querySelector("div.box3");
box3Div.onclick = function(){
    this.parentElement.previousSibling.style.border = "1px solid red";
}
0
MarkyMarksFunkyBunch 30 Авг 2017 в 16:23