Question

以下是我的HTML：

 <div class="col-md-2">
                                <select class=" form-control" title="Dropdown" id="country-change">
                                    <option value="all">All Countries</option>
                                    <option value="US">US</option>
                                    <option value="UK">UK</option> 
                                    <option value="USSR">USSR</option> 
                                </select>

                            </div>

<div class="col-md-12 country-<%=product.country%>">
                                        <div class="col-md-3">
                                            <a href="<%= edit_product_path product %>" class="thumbnail">
                                                <% if product.product_overview_url.present? %>
                                                    <img src="<%= product.product_overview_url %>" alt="...">
                                                <% else %>
                                                    <img src="<%= asset_url('placehold_200_200.png') %>" alt="...">
                                                <% end %>
                                            </a>
                                        </div>

                                        <div class="col-md-6">
                                            <h5><%= product.name %>, for traveller in <%= product.city %></h5>
                                            <a href="/products/<%= product.id %>/edit"><i class="fa fa-cog fa-fw"></i> Manage Listing and Price</a>
                                            <br>
                                            <a href="/products/<%= product.slug %>" target="_blank"><i class="fa fa-eye fa-fw"></i> Preview Listing</a>
                                        </div>

                                        <div class="col-md-3">

                                            <select class=" form-control <%= product.status %> product-status" title="Dropdown" id="status-change" product-id="<%= product.id %>">
                                                <option value="enable" <%= 'selected' if product.status == 'enable' %>>Listed</option>
                                                <option value="disable" <%= 'selected' if product.status == 'disable' %>>Unlisted</option>
                                            </select>

                                        </div>
                                    </div>

div所属的国家/地区由country-<%= product.country%>代表，我将获得以下结果：

<div class="col-md-12 country-UK">...</div>
<div class="col-md-12 country-US">...</div>
<div class="col-md-12 country-US">...</div>
<div class="col-md-12 country-USSR">...</div>

如果选择了需要显示的国家/地区，如何隐藏未选择的国家？

$('#country-change').on('change', function(){
            var listed_country = $(this).val();
            $('.country-'+listed_country).fadeOut('slow');
        })

上面的代码隐藏了所选的代码。如何显示所选的一个并隐藏所有未选中的？感谢

Answer 1

为所有div

添加一个额外的类

<div class="col-md-12 country country-UK">...</div>
<div class="col-md-12 country country-US">...</div>
<div class="col-md-12 country country-US">...</div>
<div class="col-md-12 country country-USSR">...</div>

然后隐藏除选定的

之外的所有国家div元素

$('#country-change').on('change', function(){
    var listed_country = $(this).val();
    var $c = $('.country-'+listed_country).fadeIn('slow');
    $('div.country').not($c).fadeOut('slow');
})

$('#country-change').on('change', function() {
  var listed_country = $(this).val();
  if (listed_country == 'All') {
    $('div.country').stop(true).fadeIn('slow');
  } else {
    var $c = $('.country-' + listed_country).stop(true).fadeIn('slow');
    $('div.country').not($c).stop(true).fadeOut('slow');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country-change">
  <option>All</option>
  <option>UK</option>
  <option>US</option>
  <option>FR</option>
  <option>USSR</option>
</select>

<div class="col-md-12 country country-UK">UK</div>
<div class="col-md-12 country country-US">US</div>
<div class="col-md-12 country country-FR">FR</div>
<div class="col-md-12 country country-USSR">USSR</div>

答案 1 :(得分：1)

您可以隐藏目标元素的兄弟姐妹，只显示当前元素：

$('#country-change').on('change', function(){
        var listed_country = $(this).val();
        var targetdiv = $('.country-'+listed_country);
        targetdiv.stop().fadeIn('slow');
        targetdiv.siblings().stop().fadeOut('slow');
});

Answer 2

您可以隐藏目标元素的兄弟姐妹，只显示当前元素：

$('#country-change').on('change', function(){
        var listed_country = $(this).val();
        var targetdiv = $('.country-'+listed_country);
        targetdiv.stop().fadeIn('slow');
        targetdiv.siblings().stop().fadeOut('slow');
});

Javascript，fadeout非选择div类

2 个答案: