Jquery条件不起作用

时间:2017-09-20 22:15:52

标签: javascript jquery

我必须做一些非常基本的错误,因为我无法得到result2,即使它检查条件。它检测计数器和InpActive,但它只将计数器加起来一次(但这应该足以检查条件2),也不检查test2条件。

编辑:即时呈现全部功能。我想用每个输入进行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>

2 个答案:

答案 0 :(得分:1)

您正在将您的计数器初始化为0.它会点击if counter == 0而不会继续elseTest2检查

答案 1 :(得分:1)

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

抱歉,我无法使用您的代码,所以我完全重写了您的逻辑 - 可能是我错过了一些东西,所以请告诉我。这个解决方案适用于无限制的不同参数组,只要你在每个复选框元素上放置2个不同的属性,第一个是查询,在此之前将保存在第一种情况下在组之前的字符串:

query-before="BETWEEN" 

和一些字符串,用于标识第一种情况的查询组:

query-type="opcaopreco" 

不需要任何class / 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 '));

  });

});

此解决方案非常易于扩展,并且在大多数情况下都可以使用,它不会涵盖所有可能的情况,部分可能需要更多的工作,具体取决于您需要的确切参数或部分之前我只需加入“或” ',但对于类似的事情会很好。