background-color changes with jquery

Question

This is my first attempt at writing jQuery myself. I'm trying to make it so when I hover on an instance of a name, the background changes to white as well as all the other instances of that name. Every name has a unique data-id that is common to all it's instances.

I think my jQuery goes in err at person = this.data("id"); I'm trying to assign the data attribute of the element hovered over and then change the background of all elements with that data attribute. Not sure if I'm even close.

Errors are as follows:

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

timeline

<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>

Plynx · Accepted Answer · 2013-02-02T02:57:33.027

2

You're very close!

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

hover takes two functions as arguments, so your mouseout just does the opposite right after:

$("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");
 });

edited Feb 02 '13 at 02:57

answered Feb 02 '13 at 02:47

Plynx

11,341
3
32
33

you are fast! I had a phone call :D – Tomas Ramirez Sarduy Feb 02 '13 at 02:53
Awesome, this worked. Now is there a trick to revert on mouse out? or should i just recreate the function with `mouseout()` and `.css("background-color","gray")`? – bennett_an Feb 02 '13 at 02:56

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

The problem is that you are not getting correctly the elements with the specific data-id value, the problem is $data(person). Use this:

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

You have to inject the value of current into an attribute Equals selector, like this guy

edited May 23 '17 at 12:12

Community

1
1

answered Feb 02 '13 at 02:52

Tomas Ramirez Sarduy

17,294
8
69
85

cool, i'll learn more about attribute equals. whats the significance of the + signs? or is that just the syntax? – bennett_an Feb 02 '13 at 03:02
+ sign is for string concatenation. If you are new with Javascript or jQuery I highly recommend this reading: http://jqfundamentals.com/chapter/javascript-basics – Tomas Ramirez Sarduy Feb 02 '13 at 03:13
1

oh... i get it, i read it wrong, i thought `+ person +` was the string. really confusing when you look at it that way. – bennett_an Feb 02 '13 at 03:16

background-color changes with jquery

2 Answers2