скрыть / показать div из опции выбора на ios - не работает

Question

скрыть / показать div из опции выбора на ios - не работает

1

Экран show/hide div на основе опции выбора хорошо работает на рабочем столе, но не на устройствах ios. Я уверен, что есть лучший способ структурировать мой jQuery для этого требования. На выпадающем списке ios вы можете отметить все варианты выбора, а также выбрать и отменить выбор, чтобы увидеть следующий вариант. Мне нужно иметь возможность выбирать один вариант за раз.

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

.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%;
}

<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>

user3767554 10 май 2018, в 11:32

Источник

0

Что именно ваш вопрос? Поскольку ваш пост выглядит прямо сейчас, он, вероятно, вызовет много бессмысленных дискуссий. Не могли бы вы быть более конкретным?
sɐunıɔןɐqɐp 10 май 2018, в 09:37
0

Пожалуйста, отредактируйте ваш вопрос и удалите последний комментарий. Это правильный способ сделать это. Если у вас есть свободное время, взгляните на это: stackoverflow.com/help/how-to-ask
sɐunıɔןɐqɐp 10 май 2018, в 09:56

Теги:

javascript

jquery

ios

iphone

user-interface

1 ответ

Ещё вопросы

Что именно ваш вопрос? Поскольку ваш пост выглядит прямо сейчас, он, вероятно, вызовет много бессмысленных дискуссий. Не могли бы вы быть более конкретным?
Пожалуйста, отредактируйте ваш вопрос и удалите последний комментарий. Это правильный способ сделать это. Если у вас есть свободное время, взгляните на это: stackoverflow.com/help/how-to-ask

Kavian K. · Answer 1 · 2018-05-10T08-14-00.000Z

Вы должны использовать 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. Все еще должны выбрать и отменить выбор, чтобы увидеть следующую опцию.
Я хочу иметь возможность показывать варианты по одному
Вы должны использовать метод JQuery each() . Метод each() определяет функцию, которая будет запускаться для каждого соответствующего элемента. Я обновляю код. проверьте это пожалуйста.
неудачный - мне все еще нужно отменить выбор предыдущей опции и выбрать следующую, чтобы увидеть следующую в IOS