jQuery select: опция, почему, когда я выбираю первый вариант, чтобы показать определенное поле, но вместо этого он открывает все поля? - PullRequest
Новая
       62

jQuery select: опция, почему, когда я выбираю первый вариант, чтобы показать определенное поле, но вместо этого он открывает все поля?

0 голосов
/ 26 сентября 2019

Что я делаю не так?Есть ли решение, когда я выбираю один конкретный вариант, он открывает только это конкретное поле не все одновременно?Мое единственное решение - добавить СУХОЙ код

HTML 

   <select type="type-switcher" name="type-switcher" id="js_type_switcher" class="product-type-switcher">
          <option value="type-switcher">Type Switcher</option>
          <option value="discs">discs</option>
          <option value="books">books</option>
          <option value="furnitures">furnitures</option>
        </select>

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

 <div name="size" class="form-field hide-form-field">
        <div class="form-field">
          <span>Size:</span>
          <input type="text" name="size">
        </div>                 


<div name="weight" class="form-field hide-form-field">
        <div class="form-field">
          <span>Weight:</span>
          <input type="text" name="weight">
        </div>            

<div name="dimensions" class="form-field hide-form-field">
        <div class="form-field">
          <span>Height:</span>
          <input type="text" name="dimensions-height">
        </div>

CSS По умолчанию поля скрыты 

 .show-form-field {
   display: unset;
  }

jQuery Проблема заключается в том, что при выполнении одного из вариантов переключения дляЭкземпляр «Диски» вместо открытия только поля атрибута диска, он открывает все поля!И единственное решение, о котором я мог бы подумать, это скрыть еще два поля в каждой функции, но код get довольно DRY .Есть ли лучшее решение, когда я выбираю вариант «диски», он открывает только поле размера, а два других остаются скрытыми. 

$('.product-type-switcher').on('change', function(){

let showDiscsSize = $('div[name="size"]').addClass("show-form-field");
let showBooksWeight = $('div[name="weight"]').addClass("show-form-field");
let showFurnituresDimensions = $('div[name="dimensions"]').addClass("show-form-field");

function showDiscAttribute() {
  showDiscsSize;
  //showBooksWeight.removeClass("show-form-field");
  //showFurnituresDimensions.removeClass("show-form-field");
}
function showBooksAttribute() {
  showBooksWeight;
  //showDiscsSize.removeClass("show-form-field");
  //showFurnituresDimensions.removeClass("show-form-field");
}
function showDimensionAttribute() {
  showFurnituresDimensions;
  //showDiscsSize.removeClass("show-form-field");
  //showBooksWeight.removeClass("show-form-field");
}

  switch($(".product-type-switcher option:selected").val()) {
    case 'type-switcher':
        $(".hide-form-field").removeClass("show-form-field");
        break;
    case 'discs':
        showDiscAttribute();
        break;
    case 'books':
        showBooksAttribute();
        break;
    case 'furnitures':
        showDimensionAttribute();
        break;
    default:
  }
});

ps Я полностью новичок в программировании!

1 Ответ

0 голосов
/ 26 сентября 2019

Сначала я должен предложить несколько вещей.

  1. Отсутствуют три тега закрытия div.Сначала нужно исправить это.

Закрывающий тег Div отсутствует для следующих тегов. 

<div name="size" class="form-field hide-form-field">
<div name="weight" class="form-field hide-form-field">
<div name="dimensions" class="form-field hide-form-field">

Перед тем, как пользователь выберет любую опцию, поля ввода должны быть скрыты

.hide-form-field {display: none;}

.product-type-switcher при событии изменения должен быть заключен в

jQuery ("документ"). Ready (function () {

});

Не уверены в том, что эти коды позволяют "let showDiscsSize", "let showBooksWeight", "let showFurnituresDimensions".Я переместил ".addClass (" show-form-field ");"непосредственно к связанной функции.

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

https://jsfiddle.net/5cpt1r0y/

...