Question

我是webdevelopping的新手，而且我已经使用javascript / jquery创建了一些onclick函数，我在制作这个函数时遇到了麻烦。基本上，我正在尝试使用JQuery制作一个5星评级系统，而不使用其他人制作的插件。

我有一个HTML，我添加了以下信息

function createRating() {
    var sC = $('#starContainer');
    for (var i = 1; i <= MAX_RATING; i++) {
        sC.append($('<span>').addClass('fa fa-star').attr('id', 'star' + i));
    }
}

之后我正试图改变所点击的星星的颜色以及之前的所有星号而不重复代码。通过在点击其中一颗星星时调用此函数，当我点击其中一颗星星时，没有任何反应。我无法弄清楚我做错了什么。在这里停留了几个小时。

$('.fa.fa-star').click(function() {
    alert("fa star clicked");
    var currentStar;
    var clickedIndex = $('.fa.fa-star').index(this) + 1;
    for (var i = 1; i <= MAX_RATING; i++) {
        currentStar = $('#star' + i);
        if (i <= clickedIndex) {
            currentStar.css({"color" : "green"});
        } else {
            currentStar.css({"color" : "white"});
        }
    }
});

我知道点击不起作用，因为警报确实做了任何事情。

非常感谢有关该主题的任何帮助。

致以最诚挚的问候，

Answer 1

您的活动未触发，因为在制作星标HTML之前注册了Click事件。因此，它无法将事件附加到它。

您可以尝试使用气泡技术分配事件：

$('#starContainer').on("click", ".fa.fa-star", function() {
});

这会将事件分配给StarContainer div（假设它是在页面加载时创建的），然后查找.fa.fa-star事件的任何点击。

可点击的字体 - 真棒无法正常工作

1 个答案: