ansaurus

Question

Answer 1

A:

Since it's homework, I'm not going to give you the complete code. However, to give you an idea of how you can use ID's in selectors (it's really just about concatenating strings), I'll show you how you can aggregate all your #c1... #c4 hover functions into just this:

function bgColorLookup(id) {
    var colors = ["#FF0000", "#0000FF", "#FFFF00", "#00FF00"];
    return colors[id];
}

$(".category").hover(function(){
    var id = $(this).attr('id').substring(1);
    $("[id=gp" + id + "]".attr(bgcolor, bgColorLookup(id));
}, function() {
    $("[id=gp" + $(this).attr('id').substring(1) + "]".attr(bgcolor, '#FFFFFF');
});

For simplicity, I assumed the class "category" for c1 - c4, but you could equally well write the selector as "#c1,#c2,#c3,#c4".

As another hint, you can have more than one class on an element, say class="shop s1" and then another element with class="shop s2", so that you can do $('.shop') instead of $('*[class^=s]')

David Hedlund 2010-07-05 14:33:51

Answer 2

A:

For starters you have multiple elements on the page with the same id. Element ids have to be unique. Even if you get your logic correct, this won't work. You'd be better off omitting the ids entirely and using classes: one class for the shop and one for the category, although it looks as if you could do the shop part positionally -- calculate row/column in table and highlight the same row/column in the other table. Classes would be easier, though. You could also use ids for the actual shop columns -- that match the class for the shop selector.

Note, I'd use CSS classes to do the highlighting as well rather than directly changing the CSS on the element. It will make it easier to reset the colors on any previously highlighted elements.

<style type="text/css">
.highlight { background-color: #FFFF00; }
</style>

$('.shop-selector').hover( function() {
      $('.shop').removeClass('highlight');
      var shop = $(this).attr('class').replace( '/\s*\.shop-selector\s*/','' );
      $('#' + shop).addClass('highlight');
   },
   function() {
      var shop = $(this).attr('class').replace( '/\s*\.shop-selector\s*/','' );
      $('#' + shop).removeClass('highlight');
   }
});

Then your selector table columns look like.

 <td class="shop-selector shop1">1</td>
 <td class="shop-selector shop2">2</td>

and your shop column like

 <td id="shop1" class="shop">Shop 1</td>
 <td id="shop2" class="shop">Shop 2</td>

For your categories, you should make the group ids classes instead and do something similar.

tvanfosson 2010-07-05 14:46:37

Answer 3

A:

I don't know whether I should post here but I don't really understand your code, tvanfosson. First of all, thank you for all of your answers. But would you please explai the following code:

 var shop = $(this).attr('class').replace( '/\s*\.shop-selector\s*/','' );

thank you very much!

2010-07-05 15:00:51

ansaurus

tags:

views:

answers:

selectors with variables

related questions