删除所选课程，将课程添加到其他课程

时间：2019-06-05 05:24:51

标签： javascript jquery

对于JS来说，它是非常新的东西，到目前为止，我确实得到了我所需要的，但是它很混乱。

我有三个类aer，bsa和sf，它们有自己的div空间，默认情况下，它们具有Bootstrap 4的d-none（不显示任何内容） ）类。现在，当从下拉列表中选择aer时，应删除d-none，并且bsa和sf不应更改（因为它们已经有d-none他们）。然后，当我选择bsa时，应该删除d-none，并且aer应该具有d-none，并且对于bsa来说，什么也不会发生。 sf也是如此。

我能够通过以下JQuery完成此操作：

const aer = $('.aer');
const bsa = $('.bsa');
const sf = $('.sf');

// Encoding algorithm
$('select[id=id_encoding_algorithm_name]').change(function () {
    console.log($(this).val());
    switch ($(this).val()) {
        case "AER":
            if(aer.hasClass('d-none')) {
                aer.each(function () {
                    $(this).removeClass('d-none');
                });
            }

            if (!bsa.hasClass('d-none')) {
                bsa.each(function () {
                    $(this).addClass('d-none');
                });
            }
            if (!sf.hasClass('d-none')) {
                sf.each(function () {
                    $(this).addClass('d-none');
                });
            }
            break;
        case "BSA":
            if(bsa.hasClass('d-none')) {
                bsa.each(function () {
                    $(this).removeClass('d-none');
                });
            }

            if (!aer.hasClass('d-none')) {
                aer.each(function () {
                    $(this).addClass('d-none');
                });
            }
            if (!sf.hasClass('d-none')) {
                sf.each(function () {
                    $(this).addClass('d-none');
                });
            }
            break;
        case "SF":
            if(sf.hasClass('d-none')) {
                sf.each(function () {
                    $(this).removeClass('d-none');
                });
            }

            if (!aer.hasClass('d-none')) {
                aer.each(function () {
                    $(this).addClass('d-none');
                });
            }
            if (!bsa.hasClass('d-none')) {
                bsa.each(function () {
                    $(this).addClass('d-none');
                });
            }
            break;
    }
});

这对于切换类来说是太多代码了（我想），有没有更好的方法呢？

更新1 ：

HTML代码（仅div代码）：

<div class="pt-4">
    <div class="card">
        <div class="card-header">
            Encoding Algorithm
        </div>
        <div class="card-body">
            <div class="form-group row">
                <label for="Encoding Algorithm Name" class="col-sm-2 col-form-label align-self-center">Encoding
                    Algorithm Name</label>
                <div class="col-sm-9 align-self-center">
                    <select name="encoding_algorithm_name" class="form-control" id="id_encoding_algorithm_name">
                        <option value="AER" selected>Address Event Representation</option>

                        <option value="BSA">Ben&#39;s Spiker Algorithm</option>

                        <option value="SF">Step Forward Algorithm</option>

                    </select>
                </div>
                <div class="col-sm-1 align-self-center">
                    <a href="#" data-toggle="tooltip" data-html="true" title="Set the Encoding algorithm. &lt;br&gt;&lt;strong&gt;Value: AER (Address Event Representation the same as Threshold-base algorithm), BSA (Ben&#39;s spiker algorithm), SF (Step forward with optimisation).&lt;/strong&gt;"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
            <div class="form-group row aer d-none">
                <label for="Aer Spike Threshold Value" class="col-sm-2 col-form-label align-self-center">Aer
                    Spike Threshold Value</label>
                <div class="col-sm-9 align-self-center">
                    <input type="text" name="aer_spike_threshold_value" value="0.5" class="form-control" required id="id_aer_spike_threshold_value">
                </div>
                <div class="col-sm-1 align-self-center">
                    <a href="#" data-toggle="tooltip" data-html="true" title="Set the distance between the mean and the standard deviation of temporal data changes. &lt;br&gt;&lt;strong&gt;Value: (0,1] (real value) (anything less than 1)&lt;/strong&gt;"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
            <div class="form-group row bsa d-none">
                <label for="Num Filters" class="col-sm-2 col-form-label align-self-center">Num
                    Filters</label>
                <div class="col-sm-9 align-self-center">
                    <input type="number" name="num_filters" value="1" class="form-control" required id="id_num_filters">
                </div>
                <div class="col-sm-1 align-self-center">
                    <a href="#" data-toggle="tooltip" data-html="true" title="Set the number of filters to be used. If the numnber of filters is equals to 1 then all the features of the sample will be encoded using the same filter. If the number of filters is greater than 1 then the number of filters must be the same as the number of features of the data. &lt;br&gt;&lt;strong&gt;Value: [1, numFeatures ] (integer)&lt;/strong&gt;"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
            <div class="form-group row bsa d-none">
                <label for="Threshold Vec" class="col-sm-2 col-form-label align-self-center">Threshold
                    Vec</label>
                <div class="col-sm-9 align-self-center">
                    <input type="text" name="threshold_vec" value="0.9" class="form-control" required id="id_threshold_vec">
                </div>
                <div class="col-sm-1 align-self-center">
                    <a href="#" data-toggle="tooltip" data-html="true" title="Set the threshold value. &lt;br&gt;&lt;strong&gt;Value: [0.5, 1.0] (real value)&lt;/strong&gt;"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
            <div class="form-group row bsa d-none">
                <label for="Filter Order Vec" class="col-sm-2 col-form-label align-self-center">Filter
                    Order Vec</label>
                <div class="col-sm-9 align-self-center">
                    <input type="text" name="filter_order_vec" value="24" class="form-control" required id="id_filter_order_vec">
                </div>
                <div class="col-sm-1 align-self-center">
                    <a href="#" data-toggle="tooltip" data-html="true" title="Set the order of the low pass FIR. &lt;br&gt;&lt;strong&gt;Value: [0.5, 1.0] (real value)&lt;/strong&gt;"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
            <div class="form-group row bsa d-none">
                <label for="Filter Cutoff Vec" class="col-sm-2 col-form-label align-self-center">Filter
                    Cutoff Vec</label>
                <div class="col-sm-9 align-self-center">
                    <input type="text" name="filter_cutoff_vec" value="0.1255" class="form-control" required id="id_filter_cutoff_vec">
                </div>
                <div class="col-sm-1 align-self-center">
                    <a href="#" data-toggle="tooltip" data-html="true" title="Set the cutoff frequency of the FIR. &lt;br&gt;&lt;strong&gt;Value: (0,1). If the numFilters key is greater than 1 this&lt;/strong&gt;"><i class="fas fa-info-circle"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

5 个答案:

答案 0 :(得分：1)

为什么这么多条件？

您只需通过以下方式即可

$('select[id=id_encoding_algorithm_name]').change(function () {
    console.log($(this).val());
    
    $(aer, bsa, sf).addClass('d-none');
    switch ($(this).val()) {
        case "AER":
                aer.removeClass('d-none');
            break;
        case "BSA":
                bsa.removeClass('d-none');
            break;
        case "SF":
                sf.removeClass('d-none');
            break;
    }
});

或者如果您可以将values更改为aer，bsa，sf而不是AER，BSA，那么

 $('select[id=id_encoding_algorithm_name]').change(function () {
    console.log($(this).val());

    $(aer, bsa, sf).addClass('d-none');
    $("." + $(this).val()).removeClass('d-none');
});

答案 1 :(得分：1)

您也可以在jQuery中使用toggleClass（）。

aer.toggleClass('d-none')

答案 2 :(得分：1)

您的代码可以进一步简化。

  1. 您可以一次对整个选择执行removeClass方法。
  

从每个类别中删除单个类别，多个类别或所有类别   匹配元素集中的元素。

  1. 您真的不必检查选择是否具有要删除的类。

因此，代码可以简化为：

    case "AER":
        aer.removeClass('d-none');
        bsa.addClass('d-none');
        sf.addClass('d-none');

其他情况也一样。

答案 3 :(得分：1)

请检查以下jsFiddle： https://jsfiddle.net/ulric_469/tyf5epk2/11/

JScode：

$('select[id=id_encoding_algorithm_name]').change(function () {
    $(".common-class").addClass('d-none');
    let currentClass = $(this).val();
    currentClass = currentClass && currentClass.toLowerCase();
    $("."+currentClass).removeClass('d-none');
});

我在html中添加了一个通用类，您可以在JSfiddle中对其进行检查

答案 4 :(得分：1)

我建议您使用带有条件的jQuery#toggleClass方法来更好地控制您的代码：

const divs = $('.aer, .bsa, .sf');

// Encoding algorithm
$('select#id_encoding_algorithm_name').change(function () {
        const value = $(this).val().toLowerCase();
        divs.each(function(index, el){
            $(el).toggleClass('d-none', !$(el).hasClass(value))
        });
});
相关问题
最新问题