根據選擇的單選值進行特定查詢

我有這樣的表格：

<form>
    <input type="text" id="searchedWord" class="form-control form-control-lg" value="words here"/>
    <button type="submit" id="findWord" class="btn btn-primary">Search</button>
    
    <div>
      <input type="radio" value="exact match" id="exact-match">
      <label for="exact-match" class="checked" checked>Exact match</label>
      <input type="radio"  value="all matches" id="all-matches">
      <label for="all-matches">All matches</label>
    </div>
  </form>

因為我不能name=""在這個專案中使用單選按鈕，所以我制作了一個腳本來使用一個類來切換它們。

    let radioBtns = document.querySelectorAll('input[type="radio"]');

    function toggleCheck() {
      radioBtns.forEach(function (radioBtn) {
        radioBtn.classList.toggle('checked');
        radioBtn.classList.contains('checked') ? radioBtn.checked = true : radioBtn.checked = false;
     });
    }

    radioBtns.forEach(function (radioBtn){
    radioBtn.addEventListener('click', toggleCheck, false);
    });

    let anyMatch = document.getElementById('all-matches').classList.contains('checked');
    console.log(anyMatch);
    let exactMatch = document.getElementById('exact-match').classList.contains('checked');
    console.log(exactMatch);

根據選擇的收音機，我必須做一個不同的查詢。如果我選擇exact match，輸入中的單詞將包含引號 ( queryWithQuotes)。如果我選擇all matches，則輸入中的單詞不包含引號 ( queryWithoutQuotes)。

        let pageUrl = window.location.protocol   "//"   window.location.host;
        const searchTerm = document.getElementById("searchedWord").value.replace("'", "''");

        if (exactMatch === true) {
            let queryWithQuotes = pageUrl    "/_api/search/query?querytext='"   '"'   searchTerm   '"'   "'&selectproperties='Path,Url'&sourceid='xxxxx'";
            console.log(`queryWithQuotes variable is: ${queryWithQuotes }`);
            $.ajax(
                {
                    url: queryWithQuotes,
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: success,
                    error: error
                }
            );
        } else if (anyMatch === true) {
            let queryWithoutQuotes = pageUrl    "/_api/search/query?querytext='"   searchTerm   "'&selectproperties='Path,Url'&sourceid='xxxxx'";
            console.log(`queryWithoutQuotes variable is: ${queryWithoutQuotes }`);
            $.ajax(
                {
                    url: queryWithoutQuotes,
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: success,
                    error: error
                }
            );
        } else {
            console.log('There is an error');
        }

由于某些原因，搜索僅考慮exact match. 即使我切換到All matches，搜索也會繼續Exact match。

是什么原因？

uj5u.com熱心網友回復：

我清理了代碼，這在 jsfiddle 和 SO 代碼片段中運行良好。我不知道你是否遺漏了重要的東西，但也許這將有助于更好地了解你的問題來自哪里。我已經評論了我所做的所有更改；隨意忽略任何只是在這里發布的結果。

  let radioBtns = document.querySelectorAll('input[type="radio"]');

  function toggleCheck() {
    radioBtns.forEach(function (radioBtn) {
      radioBtn.classList.toggle('checked');
      radioBtn.checked = radioBtn.classList.contains('checked') ? true : false; // I fixed this ternary operator.
    });
  }

  radioBtns.forEach(function (radioBtn){
    radioBtn.addEventListener('click', toggleCheck, false);
  });

  function doSearch() {
    // I suspect this is the key issue that you had. The checks for anyMatch and exactMatch need to be inside the function for them to update.
    let anyMatch = document.getElementById('all-matches').classList.contains('checked');
    let exactMatch = document.getElementById('exact-match').classList.contains('checked');
    
    console.log('exact match:', exactMatch, '; any match:', anyMatch);
    
    // ... do the actual code here where you check anyMatch and exactMatch
  }

<input type="text" id="searchedWord" class="form-control form-control-lg" value="words here"/>
<button type="button" onclick="doSearch()" id="findWord" class="btn btn-primary">Search</button> <!-- I changed this button from submit to regular button since you're handling everything in javascript anyway -->
    
<div>
  <input type="radio" value="exact match" id="exact-match" class="checked" checked> <!-- I gave one of the radio buttons a "checked" by default -->
  <label for="exact-match" class="checked" checked>Exact match</label>
  <input type="radio"  value="all matches" id="all-matches">
  <label for="all-matches">All matches</label>
</div>

標籤：javascript jQuery 阿贾克斯 形式 单选按钮

上一篇：從外部XML填充HTML表

下一篇：找不到變數：fih_ajax–被Webpack捆綁后