Скрыть и показать предупреждающие сообщения на основе опции, выбранной в различных входах выбора - PullRequest
Новая
       28

Скрыть и показать предупреждающие сообщения на основе опции, выбранной в различных входах выбора

0 голосов
/ 12 апреля 2019

Я хочу отобразить 3 выбранных входа для вариантов продукта и 3 предупреждающих сообщения, которые соответствуют их соответствующему вводу выбора. Когда пользователь выбирает любой параметр, кроме первого «фиктивного» параметра, предупреждающее сообщение должно исчезнуть. Я добился этого, но я считаю, что это не лучший способ написать JS, поскольку он в основном дублируется 3 раза. Это могло быть зациклено или что-то?

Я много и много гуглял, но не могу найти простого решения.

HTML: 

<select id="select-1">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-2">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-3">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
</div>

Вот этот JS 

$( window ).load(function() {

    if($('#SingleOptionSelector-0 option').length === 1) {
      $(".option-1").hide();
    }
    if($('#SingleOptionSelector-1 option').length === 1) {
      $(".option-2").hide();
    }
    if($('#SingleOptionSelector-2 option').length === 1) {
      $(".option-3").hide();
    }

  });

  $('#SingleOptionSelector-0').on('change', function () {
    if($(this).val()===""){ 
      $(".option-1").show();
    }
    else if($(this).val()!==""){ 
      $(".option-1").hide();
    }
  });
  $('#SingleOptionSelector-1').on('change', function () {
    if($(this).val()===""){ 
      $(".option-2").show();
    }
    else {
      $(".option-2").hide();
    }
  });
  $('#SingleOptionSelector-2').on('change', function () {
    if($(this).val()===""){ 
      $(".option-3").show();
    }
    else {
      $(".option-3").hide();
    }
  });

Вот рабочий пример для codepen: https://codepen.io/anon/pen/JVJXmw

Это работает, но я хотел бы показывать только сообщения при загрузке, если в поле выбора есть несколько опций, поэтому я предполагаю скрыть / показать.

Я бы хотел написать js лучше, но не повезло

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

В этом подходе мы устанавливаем атрибут данных с целью предупреждения p.Здесь значением может быть любой допустимый селектор jQuery / CSS, который будет использоваться для выбора целевого сообщения.

Затем селектор атрибута используется для упрощения подключения обработчика событий.Здесь атрибут данных используется в качестве селектора.

Затем обработчик событий использует целевой атрибут данных из поля выбора для переключения отображения на основе выбранного значения.

Наконец, обработчики событий срабатывают после того, как они были назначены для обработки загрузки страницы.

EDIT Я пропустил требование скрыть предупреждение для выбора только с однимвариант.Для этого каждый используется для итерации выбора, проверки количества option тегов

Примечание Я выбрал значение для выбора 3, чтобы продемонстрироватьпри загрузке. 

$(document).ready(function(){
  //Set up the event handler then trigger them
  //$("[id^=select-]").change(toggleWarning).trigger("change");
  //Better still lets use the data-target attribute as our selector
  $("[data-target]").on("change",toggleWarning).trigger("change");
  
  //Hide the warnings for only one child option
  $("[data-target]").each(function(){ 
    if($(this).find("option").length === 1){
      $($(this).data("target")).hide();      
    }
  });
});

function toggleWarning(){
  //Get the target warning
  var target = $($(this).data("target"));  
  //show or hide based on value  
  target.toggle($(this).val() == "");  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="select-1" data-target=".option-1">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-2" data-target=".option-2">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-3" data-target=".option-3">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3" selected>option 3</option>
</select>

<select id="whatevs" data-target=".option-4">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<select id="opr" data-target=".somethingRandom">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<select id="onlyOne" data-target=".onlyOne">
  <option value="">Only One Option</option>  
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
  <p class="option-4">Choose an option 4</p>
  <p class="somethingRandom">Choose an option 5</p>
  <p class="onlyOne">Only One Option</p>
</div>
0 голосов
/ 12 апреля 2019

Рекомендую использовать информацию об элементе attr, например value и других подобных: 

$(".selector").change(function(){
  var elmTarget = $(this).attr("forelement");
  //u can do anything like that!, it just example
  $(".option-"+elmTarget).text(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='selector' forelement='1'>
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select class='selector' forelement='2'>
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select class='selector' forelement='3'>
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
</div>

U может изменить любое событие с ним.

...