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前端建立一个名为store的新页面。但是，我不会为此使用任何数据库，我只是想根据下拉菜单中的城市选择来过滤或显示/隐藏卡片。我已经使用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>

Answer 2

您可以只检查值All来显示所有.city元素，就像这样：

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

编辑：

我刚刚注意到，要解决同一城市的名称问题，这不是您遇到的唯一问题，我将使用classes而不是IDs。

发生此问题的原因是因为jQuery的{{1}}选择器将始终返回一个元素，即使存在多个具有相同ID的元素

仅基于客户端上的选择下拉值过滤城市卡

2 个答案: