jQuery大师，这个代码可以简化吗？(jQuery gurus, can this code be simplified?)

现场演示： http : //jsfiddle.net/stapiagutierrez/KKdsb/29/

我只是试图为网站创建我自己的星级用户界面，到目前为止，它的工作原理就是我想要的，但我想看看是否可以在不牺牲易读性的前提下削减我的代码。

由于我是jQuery的新手，也许我会以迂回的方式做事。

有什么建议在哪里改进？

ul { list-style-type:none; margin-top:10px; margin-left:10px; border:1px solid #333; border-radius:8px; overflow:hidden; width:111px; cursor:pointer; } li { float:left; margin-left:5px; padding-top:2px; } <ul> <li> <img class="onestar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="twostar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="threestar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="fourstar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="fivestar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> </ul> $(document).ready(function() { $(".rating").click(function() { if ($(this).hasClass("onestar")) { alert("Clicked on 1 star!"); } else if ($(this).hasClass("twostar")) { alert("Clicked on 2 stars!"); } else if ($(this).hasClass("threestar")) { alert("Clicked on 3 stars!"); } else if ($(this).hasClass("fourstar")) { alert("Clicked on 4 stars!"); } else if ($(this).hasClass("fivestar")) { alert("Clicked on 5 stars!"); } }); $(".rating").mouseleave(function() { $(".rating").each(function() { $(this).attr("src", "http://i.imgur.com/8LA1i.png"); }); }); $(".rating").mouseover(function() { if ($(this).hasClass("onestar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("twostar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("threestar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".threestar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("fourstar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".threestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".fourstar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("fivestar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".threestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".fourstar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".fivestar").attr('src', 'http://i.imgur.com/X68bI.png'); } }); });

Live demo: http://jsfiddle.net/stapiagutierrez/KKdsb/29/

I'm just trying to create my own star rating UI for websites and so far it works just how I want it to, but I'd like to see if I can trim down my code without sacrificing legibility.

Since I'm new to jQuery, maybe I'm doing things the roundabout way.

Any suggestions on where to improve?

ul { list-style-type:none; margin-top:10px; margin-left:10px; border:1px solid #333; border-radius:8px; overflow:hidden; width:111px; cursor:pointer; } li { float:left; margin-left:5px; padding-top:2px; } <ul> <li> <img class="onestar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="twostar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="threestar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="fourstar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> <li> <img class="fivestar rating" src="http://i.imgur.com/8LA1i.png" alt="no-star" /> </li> </ul> $(document).ready(function() { $(".rating").click(function() { if ($(this).hasClass("onestar")) { alert("Clicked on 1 star!"); } else if ($(this).hasClass("twostar")) { alert("Clicked on 2 stars!"); } else if ($(this).hasClass("threestar")) { alert("Clicked on 3 stars!"); } else if ($(this).hasClass("fourstar")) { alert("Clicked on 4 stars!"); } else if ($(this).hasClass("fivestar")) { alert("Clicked on 5 stars!"); } }); $(".rating").mouseleave(function() { $(".rating").each(function() { $(this).attr("src", "http://i.imgur.com/8LA1i.png"); }); }); $(".rating").mouseover(function() { if ($(this).hasClass("onestar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("twostar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("threestar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".threestar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("fourstar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".threestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".fourstar").attr('src', 'http://i.imgur.com/X68bI.png'); } else if ($(this).hasClass("fivestar")) { $(".onestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".twostar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".threestar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".fourstar").attr('src', 'http://i.imgur.com/X68bI.png'); $(".fivestar").attr('src', 'http://i.imgur.com/X68bI.png'); } }); });

最满意答案

这很有趣，这里是jsFiddle： http : //jsfiddle.net/KKdsb/30/

注意： mouseover处理程序中的两个parent()函数的用法取决于您的html结构。我建议使用类（或类似$(this).closest('.classname')直接使用$(this).closest('.classname')来访问父元素<ul> 。

jQuery代码：

$(document).ready(function() { $(".rating").click(function() { var position = $(this).parent().index(); }); $(".rating").mouseleave(function() { $(".rating").each(function() { $(this).attr("src", "http://i.imgur.com/8LA1i.png"); }); }); $(".rating").mouseover(function() { var position = $(this).parent().index() + 1; $(this).parent().parent().find("li:lt("+position+") > img").each(function (i, e) { $(e).attr('src', 'http://i.imgur.com/X68bI.png'); }); }); });

参考：

http://api.jquery.com/each/ http://api.jquery.com/lt-selector/ http://api.jquery.com/index/

That was kinda fun, here's the jsFiddle: http://jsfiddle.net/KKdsb/30/

NOTE: The usage of two parent() functions in the mouseover handler is subject to your html structure. I'd recommend a class or similar to access the parent <ul> element directly using $(this).closest('.classname').

jQuery code:

$(document).ready(function() { $(".rating").click(function() { var position = $(this).parent().index(); }); $(".rating").mouseleave(function() { $(".rating").each(function() { $(this).attr("src", "http://i.imgur.com/8LA1i.png"); }); }); $(".rating").mouseover(function() { var position = $(this).parent().index() + 1; $(this).parent().parent().find("li:lt("+position+") > img").each(function (i, e) { $(e).attr('src', 'http://i.imgur.com/X68bI.png'); }); }); });

Reference:

http://api.jquery.com/each/ http://api.jquery.com/lt-selector/ http://api.jquery.com/index/

更多推荐