-1

我有一个 MVC 项目，它在 _Layout.cshtml 中有一个横幅

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

和一个 Img 标记，用于根据当前的 logges 用户获取 Profile Pic

<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

太棒了......非常感谢Yasser......代码需要一些修复，但感谢你现在它的工作。贝娄我给出了工作代码..它几乎与你为我纠正的代码相同，但在必要的地方有大写字母。

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

雅虎..非常感谢

于 2012-08-26T22:44:42.903 回答
0

简短的回答：

为图像添加一个类进行评级，说一个类“评级”，然后将 $("img") 替换为 $("img.rating")

长答案：

好的，您正在使用的 jquery 选择器就是这个$("img")，它表示images从页面中选择全部。因此问题。

现在你应该怎么做，

由于您只想让 jquery 为 5 个评级图像运行，您可以让所有图像都有一个公共类，如下所示。

<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 回答