javascript不能应用的问题取决于URL参数是否为

Question

有下拉列表（select选项）select是否is_recruiting，单选选项select'Total'或'Period'，并输入'from_date'和'to_date'的标签来设置selecting 'Period'时的日期。

当单选选项居中，'Total'被select编辑时，日期输入标签被阻止输入，招募选项可以被select编辑。反之，如果'Period'被select编辑，招募选项被屏蔽，可以设置期间(from_date & to_date)。

<form action="/chart" method="GET">
    <select name="is_recruiting" id="is_recruiting" class="ml-4">
        <option value="A" {% if is_recruiting == "A" %} selected {% endif %}>A</option>
        <option value="B" {% if is_recruiting == "B" %} selected {% endif %}>B</option>
        <option value="ALL" {% if is_recruiting == "ALL" %} selected {% endif %}>ALL</option>
    </select>
    <div class="radio" style="display: inline">
      <label><input type="radio" name="optionRadios" value="total" {% if option_radio != 'period' %} checked {% endif %}/> Total </label>
    </div>
    <div class="radio" style="display: inline">
      <label><input type="radio" name="optionRadios" value="period" {% if option_radio == 'period' %} checked {% endif %}/> Period : </label>
        <input autocomplete="off" class="datepicker" name="from_date" id="fromDate" value={{from_date|default_if_none:''}}>
        <label> ~ </label>
        <input autocomplete="off" class="datepicker" name="to_date" id="toDate" value={{to_date|default_if_none:''}}>
    </div>
    <button class="btn btn-primary btn-xs mb-1" type="submit">Submit</button>
</form>


<script>
    $('input[type=radio][name=optionRadios]').on('click',function () {
    var chkValue = $('input[type=radio][name=optionRadios]:checked').val();
    var recruitingSelect = document.getElementById("is_recruiting");

    if(chkValue == 'total'){
        $( '#fromDate' ).attr('disabled', 'disabled').val('');
        $( '#toDate' ).attr('disabled', 'disabled').val('');

    }
    elif(chkValue == 'total'){
        $( '#fromDate' ).removeAttr('disabled');
        $( '#toDate' ).removeAttr('disabled');
    }

    if(chkValue == 'period'){
        recruitingSelect.disabled = true;
    }
    else {
        recruitingSelect.disabled = false;
    }
});
</script>

如果url中没有is_recruiting或optionRadios、from_date、to_date参数，上面的JavaScript代码可以正常工作，但是如果您 select 一个选项并提交一次并在 url 中包含参数， JavaScript 不应用。怎么了？

http://127.0.0.1:8000/chart/ -> JavaScript 应用 http://127.0.0.1:8000/chart/?is_recruiting=A&optionRadios=total -> JavaScript 未应用

Answer 1

您的 Javascript 很可能已损坏，因为 elif 不存在于 JavaScript 中。请改用 else if(...)。此外，您似乎在 else if 逻辑中有错字：您正在第二次检查 chkValue == 'total'（在第一次 if 之后）。我猜正确的条件是 chkValue != 'total'.

此外，从 ES6 开始，建议您使用 type-safe 检查 === 和 !==。这些运算符将在比较运算的两侧时检查参数的数据类型。

javascript不能应用的问题取决于URL参数是否为

The problem that javascript cannot be applied depending on whether the URL parameter is

html

javascript

django