-1

_Layout.cshtmlにバナーがあるMVCプロジェクトがあります

<img src="../../SitePics/NewBanner.jpg") class="BannerSize" />

そして、現在のloggesユーザーに応じてプロファイル写真を取得するためのImgタグ

<img src="../../@Model.TripPic" class="TripImage" align="left" />

ジェイソンと一緒にレーティングを実装しました

<script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.4a2.js"></script>
<script language="javascript" type="text/javascript">

          $(function () {
        $("img").mouseover(function () {
            giveRating($(this), "FilledStar.png");
            $(this).css("cursor", "pointer");
        });

        $("img").mouseout(function () {
            giveRating($(this), "EmptyStar.png");
        });

        $("img").click(function () {
            $("img").unbind("mouseout mouseover click");

            // call ajax methods to update database
            var url = "/Rating/PostRating?rating=" + parseInt($(this).attr("id"));
            $.post(url, null, function (data) {
                $("#result").text(data);
            });
        });
    });

    function giveRating(img, image) {
        img.attr("src", "/Content/Images/" + image)
           .prevAll("img").attr("src", "/Content/Images/" + image);
    }
</script>        

 <p>
    <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
    <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
    <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
    <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
    <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />
</p>
<div id="result"></div>

私の問題は、プログラムを実行すると、バナーとプロフィールの画像も、マウスポインターの上/外で実行されると、空または塗りつぶされた開始に変更されることです。

バナーとプロフィール写真がMouseOverで変更されるのを止めるのを手伝ってください

4

2 に答える 2

0

短い答え ：

評価のために画像にクラスを追加します。たとえば、クラスを「評価」してから、$（ "img"）を次のように置き換えます。 $("img.rating")

長い答え：

さて、あなたが使用しているjqueryセレクターはこれです。$("img")これはページからすべてを選択することimagesを示しています。したがって、問題。

今、あなたがすべきこと、

5つの評価画像に対してのみjqueryを実行したいので、以下に示すように、すべての画像に共通のクラスを持たせることができます。

<img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
<img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
<img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
<img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
<img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />

そして今、あなたはこのようにあなたのコードを使うことができます...

<script language="javascript" type="text/javascript">

          $(function () {
        $("img.rating").mouseover(function () {
            giveRating($(this), "FilledStar.png");
            $(this).css("cursor", "pointer");
        });

        $("img.rating").mouseout(function () {
            giveRating($(this), "EmptyStar.png");
        });

        $("img.rating").click(function () {
            $("img.rating").unbind("mouseout mouseover click");

            // call ajax methods to update database
            var url = "/Rating/PostRating?rating=" + parseInt($(this).attr("id"));
            $.post(url, null, function (data) {
                $("#result").text(data);
            });
        });
    });

    function giveRating(img, image) {
        img.attr("src", "/Content/Images/" + image)
           .prevAll("img").attr("src", "/Content/Images/" + image);
    }
</script>
于 2012-08-26T16:16:47.367 に答える
0

素晴らしい.....どうもありがとうございました...コードには少し修正が必要でしたが、おかげで現在は機能しています。ベロー私は作業コードを与えました..ほとんど同じコードが私のために修正されましたが、必要な場所に大文字があります。

<script>

$(function () {
    $("img.Rating").mouseover(function () {
        giveRating($(this), "FilledStar.png");
        $(this).css("cursor", "pointer");
    });

    $("img.Rating").mouseout(function () {
        giveRating($(this), "EmptyStar.png");
    });

    $("img.Rating").click(function () {
        $("img.Rating").unbind("mouseout mouseover click");

        // call ajax methods to update database
        var url = "/Rating/PostRating?rating=" + parseInt($(this).attr("id"));
        $.post(url, null, function (data) {
            $("#result").text(data);
        });
    });
});

function giveRating(img, image) {
    img.attr("src", "/Content/Images/" + image)
       .prevAll("img.Rating").attr("src", "/Content/Images/" + image);
}

</script>        

 <p>
    <img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
    <img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
    <img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
    <img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
    <img class="Rating" src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />
</p>
<div id="result"></div>

Yahoooo ..どうもありがとう

于 2012-08-26T22:44:42.903 に答える