filter function with radio button-CodePudding

All I need is a function to filter my page based on the text contained in the div class desc that is the word PROD or test. I had thought of something like the one contained in the script tags but I can't get it to work.

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>


    <script>

$(function () {
            $('input[name="test"]').on('click', function (a, b) {
                var value = this.value;
                $('#elenco > .desc').hide();
                if (value == 'All') {
                    $('#elenco > .desc').show();
                }
               else if (value == 'PROD') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return this.value;
                    }).show();
                }
              else if (value == 'TEST') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return this.value;
                    }).show();
                }
            });
        });


    </script>

    <input type="radio" value="All" checked name="test"><label>All</label>
    <input type="radio" value="PROD" name="test"><label> PROD</label>
    <input type="radio" value="TEST" name="test"><label>TEST</label>



<div id="elenco"></div>
    <div >
        cliente
        <div  value="PROD">
            betafrik prod <br>
            <img src=""  >

        </div>
        <div >
            INDIRIZZI IP
            <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
            <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
            <br>
            <ul>
                <li><button type="button" onclick="UpVersioneT()" >UpVersione</button><div  id="UpVersioneBetafrikP">Risultato</div></li>
                <li><button type="button" onclick="reloadmem()" >10.13.1.47</button><div  id="resultBetafrikP1">Risultato</div></li>
                <li><button type="button" onclick="reloadmem()" >10.13.1.48</button><div  id="resultBetafrikP2">Risultato</div></li>
            </ul>

        </div>
    </div>

    <div >
        cliente
        <div  value="TEST">
            betitaly test <br>
            <img src=""  >

        </div>
        <div >
            INDIRIZZI IP
            <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
            <button type="button" onclick="reloadmem()" id="r1">reload</button>
            <br>
            <ul>
                <li><button type="button" onclick="UpVersioneT()" >UpVersione</button><div  id="UpVersioneBetitalyT">Risultato</div></li>
                <li><button type="button" onclick="reloadmem()" >10.57.0.71</button><div  id="resultBetitalyT">Risultato</div></li>
            </ul>

        </div>
    </div>

    <div >
        cliente
        <div >
            vincitù test <br>
            <img src=""  >

        </div>
        <div >
            INDIRIZZI IP
            <button type="button" onclick="managerVincituT()" id="m1">manager</button>
            <button type="button" onclick="reloadmem()" id="r1">reload</button>
            <br>
            <ul>
                <li><button type="button" onclick="UpVersioneT()" >UpVersione</button><div  id="UpVersioneVincituT">Risultato</div></li>
                <li><button type="button" onclick="reloadmem()" >10.55.0.71</button><div  id="resultVincituP">Risultato</div></li>
            </ul>

        </div>
    </div>

    <div >
        cliente
        <div  value="TEST">
            betitaly test <br>
            <img src="  ">

        </div>
        <div >
            INDIRIZZI IP
            <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
            <button type="button" onclick="reloadmem()" id="r1">reload</button>
            <br>
            <ul>
                <li><button type="button" onclick="UpVersioneT()" >UpVersione</button><div  id="UpVersioneBetitalyT">Risultato</div></li>
                <li><button type="button" onclick="reloadmem()" >10.57.0.71</button><div  id="resultBetitalyT">Risultato</div></li>
            </ul>

        </div>
    </div>
</div>
</body>
</html>

I tried the function above which I can't get it to work. In practice, based on the selection button, only the results associated with it must appear and by default, the selected button must be ALL.

CodePudding user response：

A quick auto-format of your code shows that, where you have indentation indicating a child, .cliente is not a child of #elenco because you have <div id="elenco"></div>.

Your HTML:

<div id="elenco"></div>
    <div >
    </div>
</div>

(with an error on the last </div>)

reformats as

<div id="elenco"></div>
<div >
</div>
</div>

so it's easier to see that cliente is not a child of elenco.

Secondly, your selector is $("#elenco > .desc") where > means a direct-descendent (immediate child or similar term).

This is the same as $("#elenco").children().filter(".desc")

But .cliente is the direct-child and .desc is a child of .cliente - so your selector needs to be #elenco .desc or #elenco > .cliente > .desc

~~Thirdly, you filter by checking .desc .value is <10 - but the .value is "PROD" or "TEST", not numeric.~~

Question was updated:

Thirdly, you filter by return this.value

However, .filter requires a boolean to filter, so "truthy" this.value will always be true.

Looks like you just need to compare, as in:

var v = b.value;
return this.value == v;

For the snippet below I've changed this to just match on value using an attribute selector rather than filter.

Matching on attribute doesn't need the if (value== as it could be just

$("#elenco .desc[value='"   this.value   '"]").show();

but left as 2x if in the snippet in case there's some other filter to be applied.

$(function() {
  $('input[name="test"]').on('change', function(a, b) {
    var value = this.value;
    console.log(value)
    $('#elenco .desc').hide();
    if (value == 'All') {
      $('#elenco .desc').show();
    }
    if (value == 'PROD') {
      //$('#elenco .desc').filter(function(a, b) {
      //  var v = b.value;
      //  return 10 > v;
      //}).show();
      $('#elenco .desc[value="PROD"]').show();
    }
    if (value == 'TEST') {
      //$('#elenco .desc').filter(function(a, b) {
      //  var v = b.value;
      //  return v >= 10 && v <= 20;
      //}).show();
      $('#elenco .desc[value="TEST"]').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="PROD" name="test"><label> Under 10$</label>
<input type="radio" value="TEST" name="test"><label>Between 10$ - 20$</label>

<div id="elenco">
  <div >
    cliente
    <div  value="PROD">
      betafrik prod <br>
      <img src="">

    </div>
    <div >
      INDIRIZZI IP
      <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
      <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" >UpVersione</button>
          <div  id="UpVersioneBetafrikP">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" >10.13.1.47</button>
          <div  id="resultBetafrikP1">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" >10.13.1.48</button>
          <div  id="resultBetafrikP2">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div >
    cliente
    <div  value="TEST">
      betitaly test <br>
      <img src="">

    </div>
    <div >
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" >UpVersione</button>
          <div  id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" >10.57.0.71</button>
          <div  id="resultBetitalyT">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div >
    cliente
    <div >
      vincitù test <br>
      <img src="">

    </div>
    <div >
      INDIRIZZI IP
      <button type="button" onclick="managerVincituT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" >UpVersione</button>
          <div  id="UpVersioneVincituT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" >10.55.0.71</button>
          <div  id="resultVincituP">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div >
    cliente
    <div  value="TEST">
      betitaly test <br>
      <img src="  ">

    </div>
    <div >
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" >UpVersione</button>
          <div  id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" >10.57.0.71</button>
          <div  id="resultBetitalyT">Risultato</div>
        </li>
      </ul>

    </div>
  </div>
</div>

CodePudding user response：

try changing the 'change' to click like i did here below and adding else if, instead of 3 'if' s

 $(function () {
            $('input[name="test"]').on('click', function (a, b) {
                var value = this.value;
                $('#elenco > .desc').hide();
                if (value == 'All') {
                    $('#elenco > .desc').show();
                }
               else if (value == 'PROD') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return 10 > v;
                    }).show();
                }
              else if (value == 'TEST') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return v>=10 && v <= 20;
                    }).show();
                }
            });
        });