class для mouseover
Здравствуйте. Нашел тут на форуме схожие темы с решениями, но адаптация под свои нужны не дала плодов.
<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; }); Какие есть варианты оптимизации скрипта, чтобы не нужно было для каждой группы элементов прописывать новую переменную? |
neitherknows,
что должен делать скрипт? где описание? |
Цитата:
Что можно сделать, что бы не прописывать в скрипте каждый новый класс вручную (select0,select1,select2,...)? |
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> |
рони,
разобрался, ещё раз спасибо. $(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": "" }); }); }); }); |
Часовой пояс GMT +3, время: 13:59. |