jQuery 大师，这段代码可以简化吗？

Question

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

---

我只是想为网站创建我自己的星级评分 UI，到目前为止，它可以正常工作，但我想看看我是否可以在不牺牲易读性的情况下精简我的代码。

因为我是 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');
        }
    });
});

Answer 1

这有点有趣，这是 jsFiddle:http://jsfiddle.net/KKdsb/30/

注意:两个parent()的用法在 mouseover 中发挥作用处理程序取决于您的 html 结构。我会推荐一个类或类似的类来访问父类 <ul>元素直接使用$(this).closest('.classname') .

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/