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

在column类元素上使用特定属性而不是内部文本来查找要显示的选项卡更为可靠。下面是一个使用列上的data-target属性和输入上的tab类的示例：

​

$(".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-->

​

Answer 2

好吧，你可以简单得多，比如将一些与主题相关的数据添加到输入中，当选择一个对象时，显示具有相关数据的对象，并隐藏具有不相关数据的对象：

​

$(".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-->

​

您还可以有多个具有相同数据的元素，当选择该主题时，所有元素都将可见。