Question

I am working on an iPad app and the code is over 1000 lines if jquery code and i know it can be shorter so I make a test page to get my loop to work. I have 2 test pages and the same code but it only work on one.

The working page:

    <div class="p1hole1"></div>
<div class="p1hole2"></div>
<div class="p1hole3"></div>
<div class="p1hole4"></div>
<div class="p2hole1"></div>
<div class="p2hole2"></div>
<div class="p2hole3"></div>
<div class="p2hole4"></div>
<div class="p3hole1"></div>
<div class="p3hole2"></div>
<div class="p3hole3"></div>
<div class="p3hole4"></div>
<script type="text/javascript">
(function () {
    for(p=1; p<4; p++){
        for ( i=1; i<5; i++){
                $(".p" + p + "hole" + i).html("class= 'p" + p + "hole" + i + "'");
        }
    }
})();
</script>

and the not working code:

<div>
  <select class="parhole1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
</div>
<div>
  <select class="p1hole1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
</div>
<div class="p1hole1type"></div>
<div class="p1hole2"></div>
<div class="p1hole3"></div>
<div class="p1hole4"></div>
<div class="p2hole1"></div>
<div class="p2hole2"></div>
<div class="p2hole3"></div>
<div class="p2hole4"></div>
<div class="p3hole1"></div>
<div class="p3hole2"></div>
<div class="p3hole3"></div>
<div class="p3hole4"></div>
<script type="text/javascript">
(function () {
    for(p=1; p<4; p++){
        for ( i=1; i<5; i++){
            $(".p" + p + "hole" + i).change(function () {
                n = $(".p" + p + "hole" + i + "option:selected").val();
                r = $(".parhole" + i + "option:selected").val();
                if (n == 1) {
                    $(".p" + p + "hole" + i + "type").html("Hole N One");
                }else {
                    $(".p" + p + "hole" + i + "type").html("Try agian");
                }
            });
        }
    }
})();
</script>

So why does one work but not the other. If i can solve this it will finish it can shorten my code be over 400 lines.

Answer 1

As another user has stated, your selector is missing a crucial space. With that being said, your selector doesn’t need to call upon the option:selected, since the value of the selected option is available on the select element itself.

I’ve made a couple modifications to increase scalability, as well as use the value of the select element:

$("select")
    .filter(function holeFilter(){ 
        return /^p\d+hole\d+$/.test( this.className );
    }).on("change", function(e){
        var sel = ".p" + this.className.match(/\d+/g).join("hole") + "type";
        $(sel).html( e.target.value == 1 ? "Hole in one!" : "Try again" );
    });​

Fiddle: http://jsfiddle.net/jonathansampson/qQWT7/