停止横幅和档案图片让鼠标悬停

Question

改变我其中有一个横幅在_Layout.cshtml

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

和IMG标签根据当期的logges用户获得用户照片一个MVC项目

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

，我已经实现了评级与Jason

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

我的问题是我磨片运行程序我的横幅和档案图片后，也会变成空或填充启动时它运行在输入/输出鼠标指针..

请帮我停止横幅和档案图片让鼠标悬停

Answer 1

简答变化：

一类添加到图像的评价，说一类 “等级”，然后替换为$（ “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> 

Answer 2

辉煌.....非常感谢阿拉法特...代码需要进行一些修正，但由于现在ü其工作。贝娄我已经给出了工作代码..它几乎是相同的代码，我已经纠正了我，但在必要的地方用大写字母。

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

Yahooo ..多谢