jQuery条件不起作用

Question

我必须做一些非常基本的错误，因为我无法检查结果2，即使它检查了它的条件。它检测到计数器和进攻性，但仅将计数器添加一次（但这足以检查条件2）或进行Test2条件的检查。

编辑：IM显示完整功能。我想对每个输入进行MySQLI查询，并且我希望能够添加和取出每个条目，并保留要发送到服务器的查询结构。它由于某种原因不起作用。在这篇文章中，我没有添加PHP部分。我只对使jQuery部分起作用感兴趣。

这是jQuery代码：

var inpreco = ["", "", ""];
var altpreco = ["", "", ""];
var inprocess = ["", "", ""];
var altprocess = ["", "", ""];
var cpcounter8 = 0;
var cpcounter9 = 0;
$(".opcaopreco").click(function () {
    SuperFun(this, "#preco", inpreco, altpreco, "altpreco2", "cpvalor", 
"cpindex", "cpactivo", cpcounter9, "preco", "1 AND 5000");
});
$(".opcaopreco2").click(function () {
    SuperFun(this, "#process", inprocess, altprocess, "altprocess2", 
"cpvalor8", "cpindex8", "cpactivo8", cpcounter8, "process", "1 AND 11");
});
function SuperFun(element, input, inpArray, secArray, secArray2, inpValue, 
secIndex, inpActive, counter, msqlip, ending) {
 var inpValue = $("#" + element.id).val();
var secIndex = $("#" + element.id).data(secIndex);
var inpActive = $("#" + element.id).data(inpActive);   
if (counter==0){
    counter++;
    $("#" + element.id + "l").addClass("activa");
    $(element).data(inpActive, "primary");
    inpArray[0] = (inpValue);   
}else
if (inpActive=="") {
    counter++;
    $("#" + element.id + "l").addClass("activa");
    $(element).data(inpActive, "yes");
    inpArray[secIndex]=(" OR "+msqlip+" BETWEEN "+inpValue);
    secArray[secIndex]=(secIndex);      
}else
if (inpActive=="yes") {
    counter--;
    $("#" + element.id + "l").removeClass("activa");
    $(element).data(inpActive, "");
    inpArray[secIndex]="";
    secArray[secIndex] = "";
}else
if (inpActive=="primary" && counter!==1) {
    counter--;
    $("#" + element.id + "l").removeClass("activa");
    $(element).data(inpActive, "");
    secArray2 = secArray.filter(Boolean);
    inpArray[0]=$("#op" + secArray2[0]).val();
    inpArray[$("#op" + secArray2[0]).data(secIndex)]="";
    $("#op" + secArray2[0]).data(inpActive, "primary");
    secArray[$("#op" + secArray2[0]).data(secIndex)]="";    
} else
if (inpActive=="primary" && counter==1) {
    counter--;
    $("#" + element.id + "l").removeClass("activa");
    $(element).data(inpActive, "");
    inpArray[secIndex]="";
    inpArray[0]=ending;     
}
$(input).val(inpArray[0]+inpArray[1]+inpArray[2]);        
};

这是HTML代码：

<input id="preco" type="text" name="preco" value='1 AND 5000'><br><br>
    <input id="process" type="text" name="process" value='1 AND 11'><br><br>
    <div id="op1l" class="input">
        <input type="checkbox" id="op1" class="opcaopreco" value="201 AND 400" data-cpindex="1" data-cpactivo="">
        <label for="op1"></label>
        <span class="itext">€201 - €400</span>
    </div>
    <div id="op2l" class="input">   
        <input type="checkbox" id="op2" class="opcaopreco" value='401 AND 600' data-cpindex="2" data-cpactivo="">
        <label for="op2"></label>
        <span class="itext">€401 - €600</span>
    </div>
    <div id="op3l" class="input">
        <input type="checkbox" id="op3" class="opcaopreco" value='601 AND 800' data-cpindex="3" data-cpactivo="">
        <label for="op3"></label>
        <span class="itext">€601 - €800</span>
    </div>  
    <div id="op4l" class="input">
        <input type="checkbox" id="op4" class="opcaopreco2" value="1 AND 1" data-cpindex8="1" data-cpactivo8="">
        <label for="op4"></label>
        <span class="itext">1 AND 1</span>
    </div>
    <div id="op5l" class="input">   
        <input type="checkbox" id="op5" class="opcaopreco2" value='2 AND 2' data-cpindex8="2" data-cpactivo8="">
        <label for="op5"></label>
        <span class="itext">2 AND 2</span>
    </div>
    <div id="op6l" class="input">
        <input type="checkbox" id="op6" class="opcaopreco2" value='3 AND 3' data-cpindex8="3" data-cpactivo8="">
        <label for="op6"></label>
        <span class="itext">3 AND 3</span>
    </div>
    <div id="paramount">paramount</div>

Answer 1

您将计数器初始化为0。它击中了if counter == 0，并且不会继续使用else，其中您拥有Test2检查

Answer 2

好吧，让我向您展示您的问题更好的解决方案：https://jsfiddle.net/11jm9k7a/10/

对不起，我只是无法使用您的代码，所以我完全重新设计了您的逻辑 - 可能是我错过了一些东西，所以请告诉我。该解决方案将在无限的不同参数组上工作，只要您在每个复选框元素2上放置不同的属性，第一个是查询之前，将在您的第一种情况下保存在组之前的字符串：

query-before="BETWEEN" 

和一些字符串以识别您的第一种情况的查询组：

query-type="opcaopreco" 

由于这是通用解决方案，因此无需任何类/ID的操作。

html：

<br>
<br>
<label for="process">Final Query</label>
<input id="process" type="text" name="process" value='' placeholder='1 AND 11'>
<br>
<br>
<div id="op1l" class="input">
  <input type="checkbox" id="op1" query-before="BETWEEN" query-type="opcaopreco" class="opcaopreco" value="201 AND 400" data-cpindex="1" data-cpactivo="">
  <label for="op1"></label>
  <span class="itext">€201 - €400</span>
</div>
<div id="op2l" class="input">
  <input type="checkbox" id="op2" query-before="BETWEEN" query-type="opcaopreco" class="opcaopreco" value='401 AND 600' data-cpindex="2" data-cpactivo="">
  <label for="op2"></label>
  <span class="itext">€401 - €600</span>
</div>
<div id="op3l" class="input">
  <input type="checkbox" id="op3" query-before="BETWEEN" query-type="opcaopreco" class="opcaopreco" value='601 AND 800' data-cpindex="3" data-cpactivo="">
  <label for="op3"></label>
  <span class="itext">€601 - €800</span>
</div>
<div id="op4l" class="input">
  <input type="checkbox" id="op4" query-before="" query-type="opcaopreco2" class="opcaopreco2" value="1 AND 1" data-cpindex8="1" data-cpactivo8="">
  <label for="op4"></label>
  <span class="itext">1 AND 1</span>
</div>
<div id="op5l" class="input">
  <input type="checkbox" id="op5" query-before="" query-type="opcaopreco2" class="opcaopreco2" value='2 AND 2' data-cpindex8="2" data-cpactivo8="">
  <label for="op5"></label>
  <span class="itext">2 AND 2</span>
</div>
<div id="op6l" class="input">
  <input type="checkbox" id="op6" query-before="" query-type="opcaopreco2" class="opcaopreco2" value='3 AND 3' data-cpindex8="3" data-cpactivo8="">
  <label for="op6"></label>
  <span class="itext">3 AND 3</span>
</div>

JavaScript：

$(function() {
  let query = {};
  // itterate through all input elements that have query-type attribute
  $('input[query-type]').each(function(value) {
    query[$(this).attr('query-type')] = {
      list: [],
      queryBefore: $(this).attr('query-before'),
    };
  });
  /* we first need to initialize arrays  so we can get in your case:
  query: {
    opcaopreco: {
        list: [],
        queryBefore: 'BETWEEN'
    },
    opcaopreco2: {
        list: [],
        queryBefore: ''
    },
  }
  */
  // after that attach on click even on all input elements that have query-type attribute
  $('input[query-type]').on('click', function(event) {
    // get query-type of $(this) - currently clicked element
    let typeOfQuery = $(this).attr('query-type');
    // check if this element is checked 
    if ($(this).is(":checked")) {
    /* if it is checked, push value to object and you will get
    query: {
      opcaopreco:  {
        list: ['201 AND 400'],
        queryBefore: 'BETWEEN'
      },
      opcaopreco2: {
        list: [],
        queryBefore: ''
      },
    }
    */
      query[typeOfQuery].list.push($(this).val());
    } else {
      // remove - splice element from array - check index of value and remove 1 element at that index
      query[typeOfQuery].list.splice(query[typeOfQuery].list.indexOf($(this).val()), 1);
    }
    // we also need to sort array to get remove order which people clicked
    query[typeOfQuery].list.sort();
    // create temporary array that will hold query  
    let fullQuery = [];
    // loop through object keys
    Object.keys(query).forEach((value, index) => {
      // if there's something in array then do something otherwise don't do anything
      if (query[value].list.length > 0) {
        // first query join array with string ' AND ' to get ' AND ' between all values
        // after that split it to get all values in correct order
        let arrQuery = query[value].list.join(' AND ').split(' AND ');
        // use string literal to create a string which is basically first element and last element
        fullQuery.push(`${query[value].queryBefore} ${arrQuery[0]} AND ${arrQuery[arrQuery.length-1]}`);
        // this is same as using + sign on each element with spaces in between like below
        // fullQuery.push(query[value].queryBefore + ' '+ arrQuery[0] + ' AND '+ arrQuery[arrQuery.length-1]);
      }
    });
    // join all query types with OR keyword
    $('#process').val(fullQuery.join(' OR '));
  });
});

此解决方案非常可扩展，在大多数情况下，它不会涵盖所有可能的情况，并且部分可能需要更多的工作，具体取决于您需要的确切参数，或者在一部分之前，我只是与所有内容一起加入所有内容'，但适用于类似类型的事情。