在选项选择 CSHTML 上显示/隐藏类

Question

我是任何前端开发的新手，目前正在使用 cshtml 为我的工作编写一个 HTML 视图。我想使用 JQuery 在这个文件中显示和隐藏类，并且相信我已经编写了一个函数来做到这一点。进行初始选择后，我想显示与选项值对应的类。进行更改时，不会显示任何类。这是我的代码：

@{
    ViewBag.Title = "Editor";
}

<script>

    var table = function () {

        var t = document.getElementById('table');
        var selection = t.options[t.selectedIndex].value;

        if (selection == "emp") {
            $("#emp").show();
            $("#itm").hide();
            $("#ln").hide();
            $("#mo").hide();
            $("#shft").hide();
            $("#twi").hide();
        } else if (selection == "itm") {
            $("#emp").hide();
            $("#itm").show();
            $("#ln").hide();
            $("#mo").hide();
            $("#shft").hide();
            $("#twi").hide();
        } else if (selection == "ln") {
            $("#emp").hide();
            $("#itm").hide();
            $("#ln").show();
            $("#mo").hide();
            $("#shft").hide();
            $("#twi").hide();
        } else if (selection == "mo") {
            $("#emp").hide();
            $("#itm").hide();
            $("#ln").hide();
            $("#mo").show();
            $("#shft").hide();
            $("#twi").hide();
        } else if (selection == "shft") {
            $("#emp").hide();
            $("#itm").hide();
            $("#ln").hide();
            $("#mo").hide();
            $("#shft").show();
            $("#twi").hide();
        } else if (selection == "twi") {
            $("#emp").hide();
            $("#itm").hide();
            $("#ln").hide();
            $("#mo").hide();
            $("#shft").hide();
            $("#twi").show();
        } else {
            $("#emp").hide();
            $("#itm").hide();
            $("#ln").hide();
            $("#mo").hide();
            $("#shft").hide();
            $("#twi").hide();
        }
    }
</script>

<h2>Edits</h2>

<select id="table" name="table" onclick="table()">
    <option value="0">Select a table to edit</option>
    <option value="0"></option>
    <option value="emp">Employee</option>
    <option value="itm">Item</option>
    <option value="ln">Line</option>
    <option value="mo">MO</option>
    <option value="shft">Shift</option>
    <option value="twi">TWI</option>
</select>

<br /><br />

<span hidden class="emp">
    <select name="empid" id="empid">
        <option value="0">Select Employee</option>
        @foreach (var emp in ViewBag.EMP)
        {
            <option value="@emp.EmployeeID">@emp.EmployeeName</option>
        }
    </select>
</span>

<span hidden class="itm">
    <select name="itmid" id="itmid">
        <option value="0">Select Item</option>
        @foreach (var itm in ViewBag.ITM)
        {
            <option value="@itm.ItemID">@itm.ItemName</option>
        }
    </select>
</span>

<span hidden class="ln">
    <select name="lnid" id="lnid">
        <option value="0">Select Line</option>
        @foreach (var ln in ViewBag.LN)
        {
            <option value="@ln.LineID">@ln.LineName</option>
        }
    </select>
</span>

<span hidden class="mo">
    @{int count = 0;}
    <select name="bch" id="bch">
        <option value="0">Select MO</option>
        @foreach (var mo in ViewBag.MO)
        {
            <option value="@mo.NBMO">@ViewBag.fullMO[count]</option>
            count += 1;
        }
    </select>
</span>

<span hidden class="shft">
    <select name="shftid" id="shftid">
        <option value="0">Select Shift</option>
        @foreach (var shft in ViewBag.SHFT)
        {
            <option value="@shft.ShiftID">@shft.ShiftCode</option>
        }
    </select>
</span>

<span hidden class="twi">
    @{count = 0;}
    <select name="tnum" id="tnum">
        <option value="0">Select TWI</option>
        @foreach (var twi in ViewBag.TWI)
        {
            <option value="@twi.TWINumber">@ViewBag.fullTWI[count]</option>
            count += 1;
        }
    </select>
</span>

Answer 1

元素可以有多个类，所以给所有跨度一个公共类。允许您将整个班级隐藏在一行中

然后使用顶部选择的值创建一个选择器来匹配你要显示的那个

您正在使用 ID 选择器来尝试定位类。类选择器以点为前缀。

$('#table').change(function() {
  // `this` is the select element
  var value = $(this).val();
  // hide all the spans
  $('.select-wrap').hide();
  // don't show anything if value is zero
  if (value !== '0') {
    // using the classes you created on spans
    var classSelector = '.' + value
    $('.select-wrap' + classSelector).show();
    // OR Using select ID and traverse to it's parent
    // $('#' + value + 'id').parent().show()
   
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Edits</h2>

<select id="table" name="table">
  <option value="0">Select a table to edit</option>     
  <option value="emp">Employee</option>
  <option value="itm">Item</option>
  <option value="ln">Line</option>
  <option value="mo">MO</option>
  <option value="shft">Shift</option>
  <option value="twi">TWI</option>
</select>

<br /><br />

<span hidden class="select-wrap emp">
    <select name="empid" id="empid">
        <option value="0">Select Employee</option>
        @foreach (var emp in ViewBag.EMP)
        {
            <option value="@emp.EmployeeID">@emp.EmployeeName</option>
        }
    </select>
</span>

<span hidden class="select-wrap itm">
    <select name="itmid" id="itmid">
        <option value="0">Select Item</option>
        @foreach (var itm in ViewBag.ITM)
        {
            <option value="@itm.ItemID">@itm.ItemName</option>
        }
    </select>
</span>

<span hidden class="select-wrap ln">
    <select name="lnid" id="lnid">
        <option value="0">Select Line</option>
        @foreach (var ln in ViewBag.LN)
        {
            <option value="@ln.LineID">@ln.LineName</option>
        }
    </select>
</span>

<span hidden class="select-wrap mo">
    @{int count = 0;}
    <select name="bch" id="bch">
        <option value="0">Select MO</option>
        @foreach (var mo in ViewBag.MO)
        {
            <option value="@mo.NBMO">@ViewBag.fullMO[count]</option>
            count += 1;
        }
    </select>
</span>

<span hidden class="select-wrap shft">
    <select name="shftid" id="shftid">
        <option value="0">Select Shift</option>
        @foreach (var shft in ViewBag.SHFT)
        {
            <option value="@shft.ShiftID">@shft.ShiftCode</option>
        }
    </select>
</span>

<span hidden class="select-wrap twi">
    @{count = 0;}
    <select name="tnum" id="tnum">
        <option value="0">Select TWI</option>
        @foreach (var twi in ViewBag.TWI)
        {
            <option value="@twi.TWINumber">@ViewBag.fullTWI[count]</option>
            count += 1;
        }
    </select>
</span>

Answer 2

您使用的是 ID 选择器而不是类选择器。请改用$(".emp").show()。阅读更多here。

Answer 3

请记住，使用 javascript 或 jquery 访问 HTML 元素时，id 只能应用于一个元素，而类可以应用于多个 HTML 元素。