селекторы с переменными - PullRequest
Новая
       18

селекторы с переменными

0 голосов
/ 05 июля 2010

Я хочу изменить цвет магазина x при наведении курсора на поле X и наоборот. 

<!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","#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>&nbsp;</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>&nbsp;</p>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 05 июля 2010

Для начала у вас есть несколько элементов на странице с одинаковым идентификатором.Идентификаторы элементов должны быть уникальными.Даже если вы правильно поняли логику, это не сработает.Лучше было бы полностью пропустить идентификаторы и использовать классы: один класс для магазина и один для категории, хотя выглядит так, как будто вы можете сделать часть магазина позиционно - вычислите строку / столбец в таблице и выделите ту же строку/ столбец в другой таблице.Классы были бы проще, хотя.Вы также можете использовать идентификаторы для фактических столбцов магазина - которые соответствуют классу для селектора магазина.

Обратите внимание, я бы использовал CSS-классы для подсветки, а не для непосредственного изменения CSS на элементе.,Это облегчит сброс цветов на любых ранее выделенных элементах. 

<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');
   }
});

Тогда столбцы вашей таблицы селекторов будут выглядеть так. 

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

, а столбец вашего магазина - 

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

Для ваших категорий вы должны вместо этого создать классы идентификаторов групп и сделать что-то подобное.

0 голосов
/ 05 июля 2010

Так как это домашнее задание, я не собираюсь давать вам полный код. Однако, чтобы дать вам представление о том, как вы можете использовать идентификаторы в селекторах (на самом деле речь идет только о конкатенации строк), я покажу вам, как вы можете объединить все ваши #c1... #c4 функции наведения в одно: 

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');
});

Для простоты я предположил, что класс "категория" для c1 - c4, но вы могли бы также написать селектор как "#c1,#c2,#c3,#c4".

Как еще один совет, вы можете иметь более одного класса для элемента, скажем, class="shop s1", а затем другой элемент с class="shop s2", так что вы можете сделать $('.shop') вместо $('*[class^=s]')

...