如何使用jQuery find（）更改CSS？
[英]How to make css change using jQuery find()?
問題描述
htmlCODE：
<body style="padding: 80px; z-index: -2">
<div class="reaction" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 1">
<div class="" style="position:absolute; border-radius: 50%; background-color: purple; width: 40px; height:40px; z-index: 0;"></div>
<div class="circle" style="position:absolute; border-radius: 50%; background-color: skyblue; width: 40px; height:40px; z-index: 0"></div>
</div>
</body>
運行良好的jQueryCODE：
$('.reaction').mousedown(function () {
$(this).find('div').css('left', '70%');
});
該代碼似乎運行良好，但是
較差的jQueryCODE：
$('.reaction').mousedown(function () {
$(this).find('div.circle').css('left', '70%');
});
這個更糟糕的代碼也可以使用，但是在瀏覽器開發人員工具的元素點擊中，它使div.circle的大小從40*40變為0*0 。 （ style="left: 70%;"似乎運行良好）
為什么在Worse working jQueryCODE之后.circle大小變為0 * 0？
1 個解決方案
解決方案1
1 已采納 2018-01-28 10:46:18
兩種代碼都能正常工作。 沒有更糟糕的代碼。 問題是
$(this).find('div') ....它的目標是.reaction的div，這就是為什么div都left:70%
$(this).find('div.circle') ...它的目標是只有具有圓類的div。
堆棧片段
$('.reaction').mousedown(function() { $(this).find('div').css('left', '70%'); $(this).find('div.circle').css('left', '30%'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body style="padding: 80px; z-index: -2"> <div class="reaction" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 1"> <div class="" style="position:absolute; border-radius: 50%; background-color: purple; width: 40px; height:40px; z-index: 0;"></div> <div class="circle" style="position:absolute; border-radius: 50%; background-color: skyblue; width: 40px; height:40px; z-index: 0"></div> </div> </body>
如何使用 jQuery 更改 CSS？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.