0

我有一个带有 javascript 代码的 html 文件。

<div id="star_rating">
    <a id="one">&#9734;</a><a id="two">&#9734;</a><a id="three">&#9734;</a>
</div>
<script type="text/javascript">
$(document).on("ready", function() {
    $("#one").hover(
        function () {
            markHover("true", "false", "false", "false", "false");
        },function () {
            markHover("false", "false", "false", "false", "false");
        }               
    );
    $("#two").hover(
        function () {
            markHover("true", "false", "false", "false", "false");
        },function () {
            markHover("false", "false", "false", "false", "false");
        }               
    );
});

这行得通。现在我使用 jQuery 模板系统。在 index.html 中是包含的脚本标签。在包含.on("pagebefore")事件的另一个文件中，我包含了三个a标签。问题是该.hover功能不起作用。当我将.hover代码粘贴到控制台中时，它可以工作。

这里是jsFiddle

谢谢指教！

4

2 回答 2

1

可能是因为元素是动态创建的

$(document).on('mouseenter','#one',function () {
    markHover("true", "false", "false", "false", "false");
}).on('mouseleave', '#one', function () {
    markHover("false", "false", "false", "false", "false");
});
$(document).on('mouseenter','#two',function () {
    markHover("true", "true", "false", "false", "false");
}).on('mouseleave', '#two', function () {
    markHover("false", "false", "false", "false", "false");
});

您可以将其简化为

var params = {
    'one': ["true", "false", "false", "false", "false"],
    'two': ["true", "true", "false", "false", "false"],
    'three': ["true", "true", "true", "false", "false"],
    'four': ["true", "true", "true", "true", "false"],
    'five': ["true", "true", "true", "true", "true"],
}

$(document).on('mouseenter','#one, #two, #three, #four, #five',function () {
    markHover.apply(window, params[this.id]);
}).on('mouseleave', '#one, #two, #three, #four, #five', function () {
    markHover("false", "false", "false", "false", "false");
});

演示：小提琴

于 2013-08-07T13:03:17.293 回答
1

太多的代码，不知道为什么它不能与你的模板一起工作，但试试这个：

jQuery：

   $(".rate").hover(
        function () {
            var thisone = parseInt($(this).data('star'));
            $(".rate").each(function(){ 
                if(parseInt($(this).data('star')) <= thisone)
                {
                    $(this).html("&#9733;");
                }
            });
        },
        function () {
            $(".rate").each(function(){
                $(this).html("&#9734;");
            });
        }               
    );

HTML：

<div>
    <a class="rate" id="one" data-star="1">&#9734;</a>
    <a class="rate" id="two" data-star="2">&#9734;</a>
    <a class="rate" id="three" data-star="3">&#9734;</a>
    <a class="rate" id="four" data-star="4">&#9734;</a>
    <a class="rate" id="five" data-star="5">&#9734;</a>
</div>

小提琴演示：http: //jsfiddle.net/calder12/uXPt9/3/

于 2013-08-07T13:16:53.280 回答