Question

我试图根据下拉菜单.map-thumb，#map-type，#map-date中的选择来显示/隐藏动态生成的div（#map-county）但我正在尝试让它运作起来很麻烦。有什么想法吗？

HAML

.row#map-thumbnail-wrapper
  .medium-4.columns
    %select#map-type
      %option.filter Type of Program
      - MapChoices['program'].each do |program|
        %option.filter{value: program.downcase.gsub(' ', '-')}= link_to program, '#'
  .medium-4.columns
    %select#map-date
      %option.filter Date Constructed
      - [*2007..Date.today.year].each do |year|
        %option.filter{value: year}= year
  .medium-4.columns
    %select#map-county
      %option.filter County
      - current_locations = @cms_page.children.published.map { |i| cms_page_content(:county, i).capitalize }.keep_if(&:present?).uniq.sort
      - current_locations.each do |county|
        %option.filter{value: county.downcase.gsub(' ', '-')}= link_to county, '#'
.well-thumbnails
  - @cms_page.children.published.in_groups_of(6, false) do |location_row|
    .row
      - location_row.each do |location|
        .medium-2.columns
          - date_created = cms_page_content(:date_created, location)
          .map-thumb.all{class: "#{cms_page_content(:program, location).downcase.gsub(' ', '-')} #{DateTime.parse(date_created).strftime('%Y') if date_created.present?} #{cms_page_content(:county, location).downcase}"}
            - preview_image = cms_page_content('preview.image', location)
            = link_to image_tag(preview_image.file.url(:original)), location.full_path if preview_image
            .map-yellow
            .map-align-mid
              .thumb-text-wrapper
                = cms_page_content(:name, location)

的jQuery

$(function(){

  $select = $('#map-date'),
  $select2 = $('#map-type'),
  $select3 = $('#map-county');

  var selectAry = [$select, $select2, $select3];
  $.each(selectAry, function(index, value){
    value.change(function() {
      var filters = $(this).val();
      $('div').hide();
      $('div[class$="' + filters + '"]').show();
    });
  });
});

修改

HTML Generated

Answer 1

$(function(){
    $("#map-date, #map-type, #map-county").change(function (){
        var filters = $(this).val();
        $("div.map-thumb").hide();
        $("div[class*='" + filters + "']").show();
        console.log($("div[class*='"+filters+"']"));
    });
});

这是一个有效的jsfiddle：http://jsfiddle.net/bcLgE/

有几个问题：

一个div在类属性中有拼写错误 - 当需要“钻孔”时“钻孔”
您隐藏了所有div，并且只需要使用“map-thumb”类
“$ =”选择器意味着属性值需要以给定的字符串结尾 - 您需要“* =”，这意味着属性值需要包含给定的字符串

Answer 2

看起来你正在隐藏所有的div，map-thumb div似乎是你需要隐藏的东西。

计算过滤器时还需要考虑所有选择值。

您需要为第一个选项添加空值，例如。

<option class='filter'>Date Constructed</option>

<option class='filter' value=''>Date Constructed</option>

这应该是一个开始：

$(function(){

  $select = $('#map-date'),
  $select2 = $('#map-type'),
  $select3 = $('#map-county');

  var selectAry = [$select, $select2, $select3];
  $.each(selectAry, function(index, value){
    value.change(function() {
      var filters = '';
        if($('#map-date').val()) {
            filters += '.' + $('#map-date').val();
        }
        if($('#map-type').val()) {
            filters += '.' + $('#map-type').val();
        }
        if($('#map-county').val()) {
            filters += '.' + $('#map-county').val();
        }
      $('.map-thumb').hide();
        if(filters) {
            $(filters).show();
        }
    });
  });
});

See the working version on JSFiddle

根据下拉菜单选择显示/隐藏动态生成的div

2 个答案: