Javascript - 当我们点击 div 时添加样式

Question

$(document).ready(function() {
    $('.nb-team .nb-team-grid').click(function() {
        $(".nb-team-info")
        .css('opacit:1')
    });
});

大家好，我正在尝试在点击 div 时更改样式。而且它应该只发生在移动分辨率中。所以我试过了，但它不起作用，我在上面附上了我的代码。请仔细阅读以获得更多说明。谢谢:)

Answer 1

如果您只想将此样式添加到移动设备或小屏幕尺寸，您可以试试这个。

<script>

$(document).ready(function() {
    $(".nb-team-grid").click(function() {
$(this).next(".nb-team-info").toggleClass("my-class");
         
    });
});

</script>

.my-class{  opacity:0;}

.parent-div{background:#eee; width:50%; float:left; height:auto;}

@media (max-width:420px){

    .my-class{
        
       opacity:0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>

<div class="nb-team-info"  style="height:100px; width:100px; background:black;"></div>

</div>


<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>

<div class="nb-team-info"  style="height:100px; width:100px; background:black;></div>

</div>