Question

我使用下面的脚本来显示或隐藏一些<div>。脚本中的selected类与display:block相关联，而我的<div>以display:none的类开头。

加载页面时，隐藏所有div。但我想展示第一个，但我能做到这一点？

$(document).ready(function(){
          $("select[name*='material']").change(function(){
              select_changed();
          });
      });

  function select_changed(){
      $("div[id*='mat-']").each(function(){
         $(this).removeClass('selected');
      });
      $("select[name*='material']").each(function(){
          var selected = $(this).val();
          $('#'+selected).addClass('selected');
      });
  }

我已经设置了像第一项一样的选项，但这并没有显示出来。我认为问题是所有div在开头都有一个display:none类。我该怎么做。

为了更清楚： HTML

  <div class="materiali">
        <select name="material" id="material">
            <option value="mat-1">Material 1</option>
            <option value="mat-2">Material 2</option>
        </select>
     </div>

    <div class="boxx" id="mat-1">
       Materail 1
    </div>
    <div class="boxx" id="mat-2">
       Materail 2
    </div>

CSS

.boxx{
  display: none
}
.selected{
    display: block;
}

Answer 1

由于您已经为select_changed()编写了一个函数，只需在就绪函数上调用该函数，执行如下操作：

$(document).ready(function(){
  $("select[name*='material']").change(function(){
    select_changed();
  });
  select_changed() //here you can invoke your function on page ready
});

function select_changed(){
  $("div[id*='mat-']").each(function(){
    $(this).removeClass('selected');
  });
  $("select[name*='material']").each(function(){
     var selected = $(this).val();
     $('#'+selected).addClass('selected');
  });
}

.boxx{
  display: none
}
.selected{
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="materiali">
        <select name="material" id="material">
            <option value="mat-1">Material 1</option>
            <option value="mat-2">Material 2</option>
        </select>
     </div>

    <div class="boxx" id="mat-1">
       Materail 1
    </div>
    <div class="boxx" id="mat-2">
       Materail 2
    </div>

Answer 2

＆＃13;

$(document).ready(function(){

function select_changed(){
  $("div[id*='mat-']").each(function(){
         $(this).removeClass('selected');
      });
      $("select[name*='material']").each(function(){
          var selected = $(this).val();
          $('#'+selected).addClass('selected');
      });    
};

$("select[name*='material']").change(function(){
              select_changed();
          });
          
          $("select[name*='material']").change();
});

＆＃13;

.boxx{
  display: none
}
.selected{
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="materiali">
        <select name="material" id="material">
            <option value="mat-1">Material 1</option>
            <option value="mat-2">Material 2</option>
        </select>
     </div>

    <div class="boxx" id="mat-1">
       Materail 1</div><div class="boxx" id="mat-2">Materail 2</div>

＆＃13;

在选择表单的页面加载显示选项

2 个答案: