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

【问题标题】：Javascript - Add style when we tap on the divJavascript - 当我们点击 div 时添加样式
【发布时间】：2019-05-12 02:49:09
【问题描述】：

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

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

【问题讨论】：

你能把你的html也发一下吗，谢谢
不是.css('opacit:1')应该是.css('opacity:1')
How to add `style=display:"block"` to an element using jQuery?的可能重复

标签： javascript jquery html css

【解决方案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>

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【解决方案2】：

我们可以像这样通过javascript添加样式

 $(".nb-team-info")
        .css('opacity','1');

你只是有一个小的语法错误

编辑 1

仅在移动分辨率时应用样式，我们可以检查窗口宽度并决定是否应用样式

if($(window).width() < 768){
     $(".nb-team-info")
            .css('opacity','1');
}

或

没有javascript，我们可以使用media-queries

@media (max-width:420px){

    .nb-team-info{
        opacity : 1
    }
}

@media (min-width:421px){

    .nb-team-info{
        opacity : 0
    }
}

【讨论】：

我们可以将此脚本设置为移动分辨率吗？
是的，我们可以通过首先检查窗口的宽度然后应用样式来做到这一点。
@Bst_coder 我已经根据你的要求更新了答案，检查一下。

【解决方案3】：

这是代码

$(document).ready(function() {
    $('.nb-team-grid').click(function() {
        if ($(window).width() < 767) {
            $(".nb-team-info").css('opacity', '.5');
        }
    });
});

【讨论】：

【解决方案4】：

对于 HTML/CSS 部分，根据您正在处理的具体内容，您可以为移动和非移动分辨率制作两个不同的<div>，然后只需将样式应用于移动视口<div> . （类似于移动导航栏的创建方式）

【讨论】：

【解决方案5】：

你应该这样写：

$('.nb-team-info').css('opacity', '1');

或：

$('.nb-team-info').attr('style', 'opacity: 1');

【讨论】：