Форум

neitherknows · #1 (**permalink**) 02.03.2017, 20:18

Здравствуйте. Нашел тут на форуме схожие темы с решениями, но адаптация под свои нужны не дала плодов.

<table id="02" width="500" height="100">
<tr>
<td>
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td class="select1">
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td class="select">
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img class="select1" src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img class="select1" src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img class="select"src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img class="select" src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td class="select">
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
</table>

$('.select').each(function() {
  $( this )
  .on( "mouseover", function() {
    $( '.select' )
    .css( 'opacity', '.2' )
    .css( 'background-color', 'red' )
    });
  $( this )
  .on( "mouseout", function() {
    $( '.select' )
    .css( 'opacity', '' )
    .css( 'background-color', '' )
    });
  return;
});

$('.select1').each(function() {
  $( this )
  .on( "mouseover", function() {
    $( '.select1' )
    .css( 'opacity', '.2' )
    .css( 'background-color', 'red' )
    });
  $( this )
  .on( "mouseout", function() {
    $( '.select1' )
    .css( 'opacity', '' )
    .css( 'background-color', '' )
    });
  return;
});

Какие есть варианты оптимизации скрипта, чтобы не нужно было для каждой группы элементов прописывать новую переменную?

рони · #2 (**permalink**) 02.03.2017, 20:42

neitherknows,
что должен делать скрипт? где описание?

neitherknows · #3 (**permalink**) 02.03.2017, 23:06

Сообщение от рони

neitherknows,
что должен делать скрипт? где описание?

При наведении курсора мыши на один из элементов таблицы,все элементы с таким же классом, должны выделится (пример как это работает сейчас вложил).

Что можно сделать, что бы не прописывать в скрипте каждый новый класс вручную (select0,select1,select2,...)?

рони · #4 (**permalink**) 02.03.2017, 23:20

neitherknows,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$('table td[class], table img[class]').each(function() {
  $(this)
  .on( "mouseenter", function() {
    $( "."+this.className )
    .css( 'opacity', '.2' )
    .css( 'background-color', 'red' )
    })
  .on( "mouseleave", function() {
    $("."+this.className )
    .css( 'opacity', '' )
    .css( 'background-color', '' )
    });

});

});
  </script>
</head>

<body>
<table id="02" width="500" height="100">
<tr>
<td>
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td class="select1">
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td class="select">
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img class="select1" src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img class="select1" src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img class="select"src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img class="select" src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td class="select">
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
</table>


</body>
</html>

neitherknows · #5 (**permalink**) 03.03.2017, 06:37

рони,
спасибо. А как ограничить список классов, для выделения только select*(1,2,3..), игнорируя другие классы (для примера noclick)?

разобрался, ещё раз спасибо.

$(function() {
$("table img[class ^= 'select']").each(function() {
  $(this)
  .on( "mouseenter", function() {
    $( "."+this.className )
      .css({
        "opacity": ".2",
        "background-color": "#c0c0c0"
      });
    })
  .on( "mouseleave", function() {
    $("."+this.className )
      .css({
        "opacity": "",
        "background-color": ""
      });
    });
  });
});

Форум

Справочник

Discord чат

Курсы javascript