Jquery:为什么一个有效而另一个无效？

Question

我正在开发一个 iPad 应用程序，如果 jquery 代码代码超过 1000 行，我知道它可以更短，所以我制作了一个测试页面以使我的循环正常工作。我有 2 个测试页和相同的代码，但只能在其中一个上运行。

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>

和 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>

那么为什么一个有效而另一个无效呢？如果我能解决这个问题，它就会完成，它可以将我的代码缩短到 400 多行。

Answer 1

您的选择器中的选项之前需要有一个空格。

n = $(".p" + p + "hole" + i + "option:selected").val();
r = $(".parhole" + i + "option:selected").val();

应该阅读:

n = $(".p" + p + "hole" + i + " option:selected").val();
r = $(".parhole" + i + " option:selected").val();