母公司以外的存取格

Question

如何通过点击.box3更改.box1的样式？

$(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>

Answer 1

您可以使用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>

Answer 2

使用parent()没有s

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

，或者使用与parents参数selectorparents('.container')

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

Answer 3

如果你想只用Javascript功能来做到这一点....

var box3Div = document.querySelector("div.box3"); 
box3Div.onclick = function(){ 
    this.parentElement.previousSibling.style.border = "1px solid red"; 
}