3

私は自分の Web サイトに評価システムを実装しており、ユーザーが評価の星の上にマウスを置いたときに合計スコアを表示しようとしています。問題は、jQuery select が入力要素の最初のセットのみを選択していることです。したがって、以下の html では、「ax1」から「ax5」までの ID を持つ要素のみを選択しています。私がやろうとしているのは、各「星」入力要素を反復処理し、画像が塗りつぶされた星であるかどうかを確認することです(各要素のマウスオーバーイベントにJavaScriptがあり、画像を空の星から塗りつぶされた星に反転させます)、塗りつぶされた星の場合、スコアが増加します。繰り返しますが、問題は最初の「星」のセットだけがカウントされていることです。

HTML: 

            <div style="margin: 20px 0 0 0; float: left;">
            <div class="divStars" style="width: 130px; float: left;">
                <input type="image" name="ctl00$MainContent$ax1" id="MainContent_ax1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax2" id="MainContent_ax2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax3" id="MainContent_ax3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax4" id="MainContent_ax4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax5" id="MainContent_ax5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />

            </div>
            <div style="margin-top: 3px; width: 600px; float: left;">
                <span>axs</span>
            </div>
        </div>
        <div style="margin: 20px 0 0 0; float: left;">
            <div class="divStars" style="width: 130px; float: left;">
                <input type="image" name="ctl00$MainContent$bx1" id="MainContent_bx1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx2" id="MainContent_bx2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx3" id="MainContent_bx3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx4" id="MainContent_bx4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx5" id="MainContent_bx5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            </div>
            <div style="margin-top: 3px; width: 600px; float: left;">
                <span>bx blah blah</span>
            </div>
        </div>

Javascript:

        $(document).on("mouseover", ".stars", function () {
        var score = 0;
        $("input[class='stars']").each(function (index, element) {
            // element == this
            if ($(element).attr("src") == "style/EmptyStar.png") {
                return false;
            }
            else {
                score = score + 1;
            };
        });
        debugger;
        $("#MainContent_lblScore").val(score);
    });
4

3 に答える 3

9

.each() 呼び出し内の関数から false を返すと、各ループが終了します。あなたが書いたコードは、空の星を初めて検出したときに終了します。

を実行して、console.log($("input[class='stars']").length)取得する数を確認してください。

また、セレクターを変更する必要があることに同意します。「input.stars」は一般に「input[class='stars']」よりも優れたセレクターです。

1）一致<input class="stars anotherClass">しますが、セレクターは一致しません

2) 一般に、ブラウザーは、クラスによって選択される要素の選択が高速です。技術的にはクラスごとに選択していますが、おそらく選択エンジンの最適化された部分をトリガーしない属性構文を使用しています。

于 2013-10-16T23:15:48.883 に答える
2

試してみませんか

      $(".stars").each(function (index, element) {
        // element == this
        if ($(this).attr("src") == "style/EmptyStar.png") {
            return false;
        }
        else {
            score = score + 1;
        };
    });
于 2013-10-16T23:10:41.037 に答える
1

JSFiddle の例

これを試して：

$(document).on("mouseover", ".stars", function () {
    var score = 0;
    $("input.stars").each(function (index, element) {
        // element == this
        //if the star is not empty, add it to the score
        if ($(element).attr("src") != "style/EmptyStar.png") {
            score = score + 1;
        };
    });
    debugger;
    $("#MainContent_lblScore").val(score);
});

マイク・エドワーズは、空の星に当たるとすぐにカウントを停止したことを指摘しており、完全に正しい. 実際には、その現在の関数から戻るだけで、each()実行が続行されます。わかりました、この例に見られるように、each()あなたが戻った場合にのみ、 は実行を中止します。私が概説した関数は、空でない星をすべてカウントし、より優れたセレクターを使用します。false

スコア集計では、入力要素である星のみを取得していることに気付きました。これは理にかなっています。ただし、mouseover イベントでは、.starsクラスを持つ任意の要素に適用します。おそらくこれは、「星を表示」などと書かれた上にマウスを移動できるようにするための意図的divなものですが、そうでない場合は、それを

$(document).on("mouseover", "input.stars", function () {

予期しない動作を避けるために。

于 2013-10-16T23:17:22.790 に答える