selectors with variables
I want to change the colour of shop x when I hover on the X box and vice versa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function(){
$("#c1").hover(function(){
$("[id='gp1']").attr("bgcolor","#FF0000");
}, function(){
$("[id='gp1']").attr("bgcolor","#FFFFFF");
}
);
$("#c2").hover(function(){
$("[id='gp2']").attr("bgcolor","#0000FF");
}, function(){
$("[id='gp2']").attr("bgcolor","#FFFFFF");
}
);
$("#c3").hover(function(){
$("[id='gp3']").attr("bgcolor","#FFFF00");
}, function(){
$("[id='gp3']").attr("bgcolor","#FFFFFF");
}
);
$("#c4").hover(function(){
$("[id='gp4']").attr("bgcolor","#00FF00");
}, function(){
$("[id='gp4']").attr("bgcolor"开发者_如何学C,"#FFFFFF");
}
);
$('*[class^=s]').hover(function(){
var group=$(this).attr("id");
var classname=$(this).attr("class");
var $jqname="$(\"[class=\'" + classname + "\']\")"
alert(group);
alert(classname);
alert($jqname);
var colour;
if(group="gp1"){
colour="#FF0000"
$jqname.attr("bgcolor","#FFFF00");
}else if(group="gp2"){
colour="#0000FF"
$jqname.attr("bgcolor","#FFFF00");
}else if(group="gp3"){
colour="#FFFF00"
$jqname.attr("bgcolor","#FFFF00");
}else{
colour="#00FF00"
$jqname.attr("bgcolor","#FFFF00");
}
}, function(){
$jqname.attr("bgcolor","#FFFFFF");
}
);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Document</title>
<style type="text/css">
<!--
td {font-size: 24px; font-family: Arial, Helvetica, sans-serif; }
-->
</style>
</head>
<body>
<table width="565" height="126" border="1">
<tr>
<td id="gp1" class="s1">1</td>
<td id="gp2" class="s2">2</td>
<td id="gp4" class="s3">3</td>
<td id="gp3" class="s4">4</td>
</tr>
<tr>
<td id="gp4" class="s5">5</td>
<td id="gp1" class="s6">6</td>
<td id="gp2" class="s7">7</td>
<td id="gp3" class="s8">8</td>
</tr>
<tr>
<td id="gp3" class="s9">9</td>
<td id="gp2" class="s10">10</td>
<td id="gp4" class="s11">11</td>
<td id="gp1" class="s12">12</td>
</tr>
<tr>
<td id="gp3" class="s13">13</td>
<td id="gp4" class="s14">14</td>
<td id="gp2" class="s15">15</td>
<td id="gp1" class="s16">16</td>
</tr>
</table>
<p> </p>
<table width="260" height="64" border="1">
<tr>
<td width="119" height="29" bgcolor="#FF0000" id="c1">Category 1</td>
<td width="125" bgcolor="#0000FF" id="c2">Category 2</td>
</tr>
<tr>
<td height="27" bgcolor="#FFFF00" id="c3">Category 3</td>
<td bgcolor="#00FF00" id="c4">Category 4</td>
</tr>
</table>
<table width="500" height="175" border="1">
<tr>
<td id="gp1" class="s1">Shop1</td>
<td id="gp2" class="s2">Shop2</td>
<td id="gp4" class="s3">Shop3</td>
<td id="gp3" class="s4">Shop4</td>
</tr>
<tr>
<td id="gp4" class="s5">Shop5</td>
<td id="gp1" class="s6">Shop6</td>
<td id="gp2" class="s7">Shop7</td>
<td id="gp3" class="s8">Shop8</td>
</tr>
<tr>
<td id="gp3" class="s9">Shop9</td>
<td id="gp2" class="s10">Shop10</td>
<td id="gp4" class="s11">Shop11</td>
<td id="gp1" class="s12">Shop12</td>
</tr>
<tr>
<td id="gp3" class="s13">Shop13</td>
<td id="gp4" class="s14">Shop14</td>
<td id="gp2" class="s15">Shop15</td>
<td id="gp1" class="s16">Shop16</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
</body>
</html>
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]')
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.
加载中,请稍侯......
精彩评论