Javascript if else正在執行if和else的一部分

Question

我有一個我不明白為什么會發生的問題。 我有一個公社If else，但正在執行if和else的一部分，並且僅在第一次執行時發生。

HTML代碼：

<div class="span3 options-search">
  <select id="condition[0]" name="condition[0]" onchange="checkCriterial(this.value,0);">                                                     
    <option value="2">Id</option>
    <option value="3">private</option>
    <option value="11">author</option>
    <option value="1">Date</option>
    <option value="4">externalId</option>
    <option value="5">Email</option>
    <option value="9">string</option>
    <option value="10">Date</option>
    <option value="6">numeric</option>
    <option selected="selected" value="7">true-false</option>
    <option value="8">numeric</option>
  </select>
</div>
<div class="span1 criterial-search-0">
  <select class="span1" id="criterial[0]" name="criterial[0]">
    <option value="1">=</option>                     
  </select>
</div>
<div class="span3 condition-quicksearch-0">
  <select class="span2 search-value-0" id="valuevar[0]" name="valuevar[0]" ><option value="false">False</option> <option value="true">True</option></select>
</div>

JS代碼：

checkCriterial = function (condition, id) {
    if (condition == 1 || condition == 10) {
        $('.search-value-' + id).attr('placeholder', '31/12/2015').addClass("datepicker").attr("data-date-format", "dd/mm/yyyy").attr("data-link-format", "yyyy-mm-dd");
        $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option><option value="2">>=</option><option value="3"><=</option></select>');
    } else if (condition == 7) {
        $('.condition-quicksearch-' + id).html('<select class="span2 search-value-' + id + '" id="valuevar[' + id + ']" name="valuevar[' + id + ']" ><option value="false">False</option> <option value="true">True</option></select>');
        $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option></select>');
    } else {
        $('.condition-quicksearch-' + id).html('<input type="text" class="span3 search-value-' + id + ' search" id="valuevar[' + id + ']" name="valuevar[' + id + ']" />');
        $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option></select>'); //<- this is also executed
    }
};

我為此https://jsfiddle.net/wr5p4xf7/創建了一個jsfiddle

如果選擇date選項，它將執行if語句和else的第二行。

我檢查的第一件事是放在方括號中，看起來不錯。

任何想法？

謝謝大家

Answer 1

這是行不通的，因為您的search-value-0字段已初始化為select元素，您需要刪除當前的search-value-0 ，創建一個新的元素輸入，並在此之后將datepicker類插入到element中。

我已經更改了您的提琴，可以在第一個條件內創建輸入，並且現在可以正常工作了。

 if (condition == 1 || condition == 10) {
        $('.condition-quicksearch-' + id).html('<input type="text" class="span3 search-value-' + id + ' search" id="valuevar[' + id + ']" name="valuevar[' + id + ']" />');
            $('.search-value-' + id).attr('placeholder', '31/12/2015').addClass("datepicker").attr("data-date-format", "dd/mm/yyyy").attr("data-link-format", "yyyy-mm-dd");
            $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option><option value="2">>=</option><option value="3"><=</option></select>');
        }

https://jsfiddle.net/wr5p4xf7/8/

Answer 2

在我的瀏覽器（Linux Ubuntu，Chrome 45）中，每個循環均按預期處理：

• 每當單擊第一個選擇元素時，都會觸發checkCriterial() ：
  • condition的值取決於在選擇框中選擇的選項。
  • 當condition為1或10時，它處理if (condition == 1 || condition == 10) { [...] } 。
  • 當condition為7時，它處理if (condition == 7) { [...] } 。
  • condition不是1、7或10時，它將處理else { [...] } 。

請參閱此經過修改的Fiddle ，在其中提醒一些調試信息。

如果您希望使用console.log進行調試而不是使用window alert ，請嘗試使用此Fiddle 。

---

問題似乎在於，當您的條件為1或10時，您忘記了用輸入框替換select語句。

您已針對else條件正確執行了此操作，但似乎已經忘記了要為if (condition == 1 || condition == 10) { [...] } 。

Answer 3

在您的jsfiddle中，只有if / else構造的第一塊正在執行。 要看到這個：

1. 在chrome中訪問您的jsfiddle。
2. 點擊F12打開開發工具。
3. 在開發工具菜單欄中，選擇源
4. 在出現的源代碼側欄中，展開fiddle.jshell.net，然后是wr5p4xf7並選擇索引。
5. 在已打開的（索引）源的第51行上放置一個斷點。
6. 在小提琴中選擇日期。
7. 使用調試器控件逐步執行路徑（例如，按F10到步驟）。