1

これは、jQuery を自分で作成する最初の試みです。名前のインスタンスにカーソルを合わせると、その名前の他のすべてのインスタンスと同様に背景が白に変わるようにしようとしています。すべての名前には、そのすべてのインスタンスに共通の一意のデータ ID があります。

person = this.data("id");ホバーした要素のデータ属性を割り当て、そのデータ属性を持つすべての要素の背景を変更しようとすると、jQueryがエラーになると思います。私が近くにいるかどうかもわかりません。

エラーは次のとおりです。

Uncaught TypeError: Object #<HTMLDivElement> has no method 'data' localhost:60
  (anonymous function) localhost:60
  jQuery.event.special.(anonymous function).handle jquery.js:3353
  jQuery.event.dispatch jquery.js:3062
  elemData.handle.eventHandle

タイムライン

<div id="center">
    <% @instances.each do |instance| %>
        <div class="instance" data-id="<%= instance.person.id %>" style="top:<%=top_helper(instance)%>px; left:<%= left_helper(instance) %>px; width:<%= width_helper(instance) %>px;">
            <span><%= instance.person.first_name %>, <%= instance.rank %></span>
        </div>
    <% end %>
</div>

<script>
    $("div#center").ready(function(){
        var person 
        $("div.instance").hover(function(){
            person = this.data("id");
            $data(person).css("background-color","white");
        });
    });
</script>
4

2 に答える 2

2

あなたはとても近いです！

$("div.instance").hover(function(){
    person = $(this).data("id");
    $('div[data-id="' + person + '"]').css("background-color","white");
 });

hover引数として 2 つの関数を受け取るため、マウスアウトは直後に反対のことを行います。

$("div.instance").hover(function(){
    person = $(this).data("id");
    $('div[data-id="' + person + '"]').css("background-color","white");
 },
 function(){
    person = $(this).data("id");
    $('div[data-id="' + person + '"]').css("background-color","gray");
 });
于 2013-02-02T02:47:52.127 に答える
1

問題は、特定の data-id 値を持つ要素を正しく取得していないことです。問題は$data(person). これを使って：

$("div#center").ready(function(){
    var person 
    $("div.instance").hover(function(){
        person = $('this').data("id");
        $('div[data-id="' + person + '"]').css("background-color","white");
    });
});

この男のように、 current の値を属性 Equals セレクターに注入する必要があります

于 2013-02-02T02:52:32.053 に答える