Question

基于select选项的show / hide div在桌面上运行良好，但在ios设备上运行不正常。我确信有更好的方法来构建我的jQuery以满足此要求。在ios native下拉菜单中，您可以勾选所有选择选项，还必须选择和取消选择才能看到下一个选项。我需要一次选择一个选项。

＆＃13;

$( function() {
        $( '#storeselector' ).on( 'input propertychange', function() {
            $( '.store-hide' ).hide();
            $( '#' + $(this).val() ).show();
        });
    });

＆＃13;

.store-right {
  float: right;
}

.i-store {
  font-size: 3rem;
  font-family: "Avenir Next", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: inherit;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
  display: block;
  margin: auto;
  text-align: right;
  padding-right: 4%;
}

.store-img {
  max-width: 1150px;
  width: 100%;
  margin: auto;
  display: block;
}

.store-hide {
  display: none;
}

.store-block {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="storeselector" tabindex="2" multiple size="3">
  <option value="level-lg">
    Lower Ground
  </option>
  <option value="level-g">
    Ground Floor
  </option>
  <option value="level-one">
    Level 1
  </option>

</select>

<div id="level-lg" class="store-hide store-block" style="display: block">
  <div class="col-lg-12">
    <span class="i-store">
                                LG
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dw468e879c/UK/SS18/Book6/hp-recs1_UK.jpg" alt="" title="">
  </div>
</div>
<div id="level-g" class="store-hide store-block">
  <div class="col-lg-12">
    <span class="i-store">
                                G
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dwc0f6b72a/UK/SS18/Book6/hp-recs2_UK.jpg" alt="" title="">
  </div>
</div>
<div id="level-one" class="store-hide store-block">
  <div class="col-lg-12">
    <span class="i-store">
                                1
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dwe06b0b29/UK/SS18/Book6/hp-recs3_UK.jpg" alt="" title="">
  </div>
</div>

＆＃13;

Answer 1

您应该使用input event代替change event。因为change event可能无法在所有浏览器上使用。

当内容发生变化且元素失去焦点时，Change事件会在大多数浏览器中触发，基本上是一组变化。与输入事件不同，您不会看到每次更改都会触发此事。

Input事件会在更改元素内容时同步触发。所以你会看到这个事件更频繁地发生。浏览器支持各不相同。

因此，input事件对于跟踪<select>字段更改非常有用。但是IE version < 9不支持它。但旧的IE版本有自己的专有事件onpropertychange与oninput相同。所以你可以用这种方式获得完整的跨浏览器支持。：

$( selector ).on( 'input propertychange' );

所以，你的javascript代码必须是这样的：

$( function() {
    $( '#storeselector' ).on( 'input propertychange', function() {
        $( '.store-hide' ).hide();
        $('#storeselector option:selected' ).each( function() {
            $( '#' + $(this).val() ).show();
        } )
    } );
} );

从ios上的select选项隐藏/显示div - 不工作

1 个答案: