Question

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

#! python3
import pandas as pd
import os

path = r'Scripts\\CSV\\'
directory = os.path.join("c:\\",path)
appended_data = []

for root,dirs,files in os.walk(directory):
     for file in files:
        if file.endswith(".csv"):
            thread = pd.read_csv(directory + file)
            thread.columns = ['num', 'id', 'body', 'title', 'url']
            s = pd.Series(''.join(thread['body']).lower().split()).value_counts()[:100]
            appended_data.append(s)
thatdata = pd.concat(appended_data)
#print(appended_data)
thatdata.to_csv = (directory + 'somename.csv')

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元素。

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

3 个答案: