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 には script タグが含まれています。.on("pagebefore")イベントと一緒にインクルードする別のファイルに、3 つ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 に答える