Question

我有一个MVC项目，在_Layout.cshtml中有一个Banner

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

和一个Img标签，用于根据当前记录用户

获取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上进行更改

Answer 1

简答：

在图片中添加课程以进行评分，比如说“评分”类，然后用$("img.rating")替换$（“img”）

长答案：

好的，您使用的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>

Answer 2

很棒.....非常感谢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>

雅虎..非常感谢

停止横幅和配置文件图片在MouseOver上进行更改

2 个答案: