Question

更新：我用我正在使用的代码更新了问题，例如基于（select）元素if（option）paint（/ option）选中我要显示或隐藏整个“工作类”div .working或if（option）选择Body Shop（/选项）我想展示整个“非生产性阶级”div。非生产性

我有多个具有相似div结构但不同类名的HTML元素，但其中一些divs确实共享某些文本，如何使用.show()使用.class显示这些div包含该特定共享文本的名称？

$('#qualifications').change(function(){
    if($('#qualifications').val() == 'Paint'){
        $('div:contains("Paint")').show();
        }
    })
});

这是一个不好的例子，因为我想使用class name而不是('div:contains('Paint')')来定位元素

这是代码：

                <select id='qualifications'>
                    <option>All</option>
                    <option>Body Shop</option>
                    <option>Electrician</option>
                    <option>Mech</option>
                    <option>Paint</option>
                </select>

                    <!-- Working Class -->
                    <div class="working">
                        <div class="working-indicator">
                            <p>W</p>
                            <div class="user-circle">
                                <img src="imgs/usericon.png">
                            </div>
                            <div class='user-info'>
                                <h6> Dennis Bokenkamp </h6>
                                <p><b><i>Paint</b></i></p>
                                <p>FIA</p>
                            </div>
                            <div class='user-clocking'>
                                <img src="imgs/clockicon.png">
                                <p>10/8/2016</p>
                                <p>10:09:00 AM</p>
                            </div>
                        </div>
                    </div>

                    <!-- Non-Productive Class -->
                    <div class="non-productive">
                        <div class="non-productive-indicator">
                            <p>N</p>
                            <div class="user-circle">
                                <img src="imgs/usericon.png">
                            </div>
                            <div class='user-info'>
                                <h6> Rick Richard </h6>
                                <p><b><i>Bodyshop 200%</b></i></p>
                                <p>DNF</p>
                            </div>
                            <div class='user-clocking'>
                                <img src="imgs/clockicon.png">
                                <p>10/8/2016</p>
                                <p>11:09:00 AM</p>
                            </div>
                        </div>
                    </div>

Answer 1

试试这个：

$(document).ready(function(){

    $("#qualifications").on("change",function(){

        if($(this).val() == 'Paint') 

            $("div.working:contains(Paint)").show();

    })

})

我在下面的示例中使用红色边框而不是show，因为如果您选择选择框的颜色，则显示所选内容。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
     <select id='qualifications'>
                    <option>All</option>
                    <option>Body Shop</option>
                    <option>Electrician</option>
                    <option>Mech</option>
                    <option>Paint</option>
    </select>

                    <!-- Working Class -->
                    <div class="working">
                        <div class="working-indicator">
                            <p>W</p>
                            <div class="user-circle">
                                <img src="imgs/usericon.png">
                            </div>
                            <div class='user-info'>
                                <h6> Dennis Bokenkamp </h6>
                                <p><b><i>Paint</b></i></p>
                                <p>FIA</p>
                            </div>
                            <div class='user-clocking'>
                                <img src="imgs/clockicon.png">
                                <p>10/8/2016</p>
                                <p>10:09:00 AM</p>
                            </div>
                        </div>
                    </div>

                    <!-- Non-Productive Class -->
                    <div class="non-productive">
                        <div class="non-productive-indicator">
                            <p>N</p>
                            <div class="user-circle">
                                <img src="imgs/usericon.png">
                            </div>
                            <div class='user-info'>
                                <h6> Rick Richard </h6>
                                <p><b><i>Bodyshop 200%</b></i></p>
                                <p>DNF</p>
                            </div>
                            <div class='user-clocking'>
                                <img src="imgs/clockicon.png">
                                <p>10/8/2016</p>
                                <p>11:09:00 AM</p>
                            </div>
                        </div>
                    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(document).ready(function(){
    
    $("#qualifications").on("change",function(){
        
        if($(this).val() == 'Paint') 
            
            $("div.working:contains(Paint)").css({border:"2px solid red"});
               
    })
    
})
       
    </script>
    </body>
</html>

＆＃13;

Answer 2

您可以使用以下语法：$('div[class*="Paint"]').show()

jQuery：如何.show（）包含特定文本的类的元素？

2 个答案: