javascript - 仅在客户端根据选择的下拉值过滤城市卡片

Question

$(function() {
        $('#cityselector').change(function(){
            $('.city').hide();
            $('#' + $(this).val()).show();
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <Select id="cityselector">
                <option selected value="All">All</option>
                <option value="Pune">Pune</option>
                <option value="Chennai">Chennai</option>
                <option value="Bengaluru">Bengaluru</option>
            </Select>
        </div>
        <div class="row">
            <div class="col-md-4 city" id="Pune">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Koregaon Park</span>                    
                    </div>

                </div>
            </div>
            <div class="col-md-4 city" id="Pune">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Vimannagar</span>                    
                    </div>

                </div>
            </div>
             <div class="col-md-4 city" id="Chennai">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Chennai</span>                    
                    </div>

                </div>
            </div>

             <div class="col-md-4 city" id="Bengaluru">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Bengaluru</span>                    
                    </div>

                </div>
            </div>

        </div>

我正在 shopify 前端构建一个名为商店的新页面。但是，我不会为此使用任何数据库，我只是想根据从下拉列表中选择的城市来过滤或显示/隐藏卡片。我已经使用 jquery show hide 过滤城市。但是当有多个具有相同城市名称的卡片时它不起作用。它只显示一张使用它的城市卡。此外，当用户从下拉列表中选择“全部”选项时，我需要显示所有城市卡片。请帮我解决这个问题。

Answer 1

代替id，给出类名:

$(function() {
        $('#cityselector').change(function(){
            if($(this).val()=="All"){$('.city').show(); return;}else{$('.city').hide();}
            $('.' + $(this).val()).show();
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <Select id="cityselector">
                <option selected value="All">All</option>
                <option value="Pune">Pune</option>
                <option value="Chennai">Chennai</option>
                <option value="Bengaluru">Bengaluru</option>
            </Select>
        </div>
        <div class="row">
            <div class="col-md-4 city Pune" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Koregaon Park</span>                    
                    </div>

                </div>
            </div>
            <div class="col-md-4 city Pune" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Vimannagar</span>                    
                    </div>

                </div>
            </div>
             <div class="col-md-4 city Chennai" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Chennai</span>                    
                    </div>

                </div>
            </div>

             <div class="col-md-4 city Bengaluru" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Bengaluru</span>                    
                    </div>

                </div>
            </div>

        </div>