1

私はiPadアプリに取り組んでおり、jqueryコードの場合、コードは1000行を超えています。コードが短くなることがわかっているので、ループを機能させるためにテストページを作成します。2 つのテスト ページと同じコードがありますが、1 つのみでしか機能しません。

作業ページ:

    <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要素の値を使用するためにいくつかの変更を加えました。

$("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 に答える