Question

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

    <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

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

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();

Answer 2

作为另一位用户has stated，您的选择器缺少关键空间。话虽如此，您的选择器不需要调用option:selected，因为select元素本身可以使用所选选项的值。

我做了一些修改以增加可伸缩性，以及使用select元素的值：

$("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" );
    });

小提琴：http://jsfiddle.net/jonathansampson/qQWT7/

Jquery：为什么一个工作而另一个不工作？

2 个答案: