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

【问题标题】：Show/Hide dynamically generated divs based on dropdown menu selection根据下拉菜单选择显示/隐藏动态生成的 div
【发布时间】：2014-05-29 04:49:59
【问题描述】：

我正在尝试根据下拉菜单 #map-type、#map-date、#map-county 的选择来显示/隐藏动态生成的 div (.map-thumb)，但我无法使其正常工作。有什么想法吗？

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

【问题讨论】：

你能发布一个指向 HTML 的链接吗？然后人们可以将其发布到 fiddle.js
在上面的编辑中添加。

标签： jquery image haml

【解决方案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 在 class 属性中有一个拼写错误 - “borehold”，而它需要是“borehole”
您隐藏了所有 div，只需要隐藏具有“map-thumb”类的 div
“$=”选择器意味着属性值需要以给定的字符串结尾——你需要“*=”，这意味着属性值需要包含给定的字符串

【讨论】：

糟糕 - 留在 console.log 中！ :P

【解决方案2】：

看起来你隐藏了所有的 div，map-thumb divs 似乎是你需要隐藏的。

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

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

<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

【讨论】：