停止橫幅和檔案圖片讓鼠標懸停

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 ..多謝