1

我正在开发一个 iPad 应用程序，如果 jquery 代码代码超过 1000 行，我知道它可以更短，所以我制作了一个测试页面来让我的循环工作。我有 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>

和不工作的代码：

<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 行。

4

2 回答 2

3

您的选择器之前需要一个空格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();
于 2012-06-12T19:54:10.817 回答
0

正如另一位用户所说，您的选择器缺少一个关键空间。话虽如此，您的选择器不需要调用option:selected，因为所选选项的值在选择元素本身上可用。

我做了一些修改以增加可伸缩性，以及使用 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/

于 2012-06-12T21:15:48.093 回答