Отображение вкладок и полей ввода условно с использованием Javascript

Question

Я работаю на некоторых вкладках, используя Jquery. Если пользователь нажимает на определенную вкладку, я фиксирую текст на нажатой вкладке и условно отображаю некоторые поля ввода. Обычно при нажатии на вкладку должны отображаться входные данные, при нажатии на другую вкладку предыдущий ввод должен быть скрыт, а следующий отображается в зависимости от условия if. Когда я нажимаю на вкладку, отображаются некоторые поля ввода, но другие не отображаются при нажатии на другую вкладку

~ Пожалуйста, помогите?

let selected = false;
$(".columns").click(function() {
  if (!selected) {
    var subject = $(this).text();
    //alert(subject);
    if (subject.trim() == "Mathematics") {
      //Show Maths Inputs
      $('.mathInput').fadeIn(2000);
    } else if (subject == "English") {
      //Show English Inputs
      $('.engInput').fadeIn(2000);
    } else {
      $('.mathInput').css('display', 'none');
      $('.engInput').css('display', 'none');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>

<!-- Maths Input-->
<div class="row mathInput" style="display: none;">
    <div class="col-6 offset-3">
        <h1>Select Percentage? </h1>
        <div class="form-group">
            <select class="form-control otherMenu wide" id="relation1">
                <option selected disabled hidden>Choose here</option>
                <option value="1"> 20% </option>
                <option value="2"> 40% </option>
                <option value="3"> 60% </option>
                <option value="4"> 70% </option>
                <option value="5"> 90% </option>
            </select>
        </div>
    </div>
</div>
<!--END-->

<!-- English Input-->
<div class="row engInput" style="display: none;">
    <div class="col-6 offset-3">
        <h1>Select Percentage? </h1>
        <div class="form-group">
            <select class="form-control otherMenu wide" id="relation1">
                <option selected disabled hidden>Choose here</option>
                <option value="1"> 20% </option>
                <option value="2"> 40% </option>
                <option value="3"> 60% </option>
                <option value="4"> 70% </option>
                <option value="5"> 90% </option>
            </select>
        </div>
    </div>
</div>
<!--END-->

Answer 1

Что ж, вы можете сделать это намного проще, например, добавив некоторые данные, связанные с предметом, во входные данные, а когда объект выбран, покажите те, у которых есть связанные данные, и скройте те, у которых нет данных:

$(".columns").click(function () {
    var subject = $(this).text().trim();
    $('[data-for]').each(function(){
        if($(this).data('for')==subject) $(this).fadeIn(2000);
        else $(this).hide();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>
<!-- Maths Input-->
<div class="row mathInput" style="display: none;" data-for="Mathematics">
    <div class="col-6 offset-3">
    <h1>Select Percentage (math)? </h1>
    <div class="form-group">
        <select class="form-control otherMenu wide" id="relation1">
            <option selected disabled hidden>Choose here</option>
            <option value="1"> 20% </option>
            <option value="2"> 40% </option>
            <option value="3"> 60% </option>
            <option value="4"> 70% </option>
            <option value="5"> 90% </option>
        </select>
    </div>
</div>
</div>
<!--END-->

<!-- English Input-->
<div class="row engInput" style="display: none;" data-for="English">
    <div class="col-6 offset-3">
    <h1>Select Percentage (eng)? </h1>
    <div class="form-group">
        <select class="form-control otherMenu wide" id="relation2">
            <option selected disabled hidden>Choose here</option>
            <option value="1"> 20% </option>
            <option value="2"> 40% </option>
            <option value="3"> 60% </option>
            <option value="4"> 70% </option>
            <option value="5"> 90% </option>
        </select>
    </div>
</div>
</div>
<!--END-->

У вас также может быть несколько элементов с одинаковыми данными, и все они будут видны при выборе этого объекта.

Answer 2

Надежнее использовать определенный атрибут в элементах класса столбца вместо внутреннего текста, чтобы выяснить, какую вкладку показывать. Вот пример использования атрибута data-target для столбцов и класса табуляции на входах:

$(".columns").click(function() {
  $(".tab").hide();
  const target = this.dataset.target
  if (target) {
    $('.' + target).fadeIn(2000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns" data-target="mathInput">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns" data-target="engInput">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>

<!-- Maths Input-->
<div class="row tab mathInput" style="display: none;">
    <div class="col-6 offset-3">
        <h1>Select Percentage? </h1>
        <div class="form-group">
            <select class="form-control otherMenu wide" id="relation1">
                <option selected disabled hidden>Choose here</option>
                <option value="1"> 20% </option>
                <option value="2"> 40% </option>
                <option value="3"> 60% </option>
                <option value="4"> 70% </option>
                <option value="5"> 90% </option>
            </select>
        </div>
    </div>
</div>
<!--END-->

<!-- English Input-->
<div class="row tab engInput" style="display: none;">
    <div class="col-6 offset-3">
        <h1>Select Percentage? </h1>
        <div class="form-group">
            <select class="form-control otherMenu wide" id="relation1">
                <option selected disabled hidden>Choose here</option>
                <option value="1"> 20% </option>
                <option value="2"> 40% </option>
                <option value="3"> 60% </option>
                <option value="4"> 70% </option>
                <option value="5"> 90% </option>
            </select>
        </div>
    </div>
</div>
<!--END-->