Присвоение класса и передача свойств
Привет всем! Нужна помощь со скриптом.
Есть примерно 10 кнопок (могут добавляться), каждая из которых присваивает контейнеру с классом .bSm определенные свойства: $('#1').click(function() { $('.bSm').toggleClass('one'); }); $('#2').click(function() { $('.bSm').toggleClass('two'); }); $('#3').click(function() { $('.bSm').toggleClass('three'); }); ... <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .bSm { display: block; background: #fff; width: 150px; height: 150px; border-radius: 8px; margin: 0 auto; } .two { width: 450px; height: 675px; border-radius: 38px; } .three { width: 267px; height: 553px; border-radius: 18px; } </style> <div class="bSm"></div> <button id="1"></button> <button id="2"></button> <button id="3"></button> <button id="4"></button> ... <div class="bSres"></div> Проблема в том, что код получится большой, а при повторном нажатии любой кнопки, свойства откатываются до предыдущего нажатия. Задача: - сократить код (если это возможно) - исправить нажатие кнопок - вывести в контейнер с классом .bSres результат, т.е. все полученные параметры. Например, я составил контейнер <div class="bSm two three"></div>, то и в результате должны быть все параметры, а повторные (вроде width) заменялись на последние: <div class="bSm two three"></div> <style> .bsm.two.three { display: block; background: #fff; width: 267px; height: 553px; border-radius: 18px; margin: 0 auto; } </style> |
madeas,
<!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() { var b = $('.btn'), cls = ["two","three"]; b.click(function() { var i = b.index(this); $('.bSm').toggleClass(cls[i]); }); }); </script> </head> <body> <style> body{ background-color: #EEE8AA; } .bSm { display: block; background: #fff; width: 150px; height: 150px; border-radius: 8px; margin: 0 auto; } .two { width: 450px; height: 675px; border-radius: 38px; } .three { width: 267px; height: 553px; border-radius: 18px; } </style> <div class="bSm"></div> <button class="btn">2</button> <button class="btn">3</button> <div class="bSres"></div> </body> </html> |
Может в массиве/объекте описать классы, которые и будут выбираться, тогда один обработчик на кнопки будет. Вот только как .toggleClass('one'), .toggleClass('two'), ... ведь в этом случае другие классы могут накапливаться.
рони, уже "законопатил". :) |
madeas,
<!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() { var b = $('.btn'); b.click(function() { var cls = $(this).data("cls"); $('.bSm').toggleClass(cls); }); }); </script> </head> <body> <style> body{ background-color: #EEE8AA; } .bSm { display: block; background: #fff; width: 150px; height: 150px; border-radius: 8px; margin: 0 auto; } .two { width: 450px; height: 675px; border-radius: 38px; } .three { width: 267px; height: 553px; border-radius: 18px; } </style> <div class="bSm"></div> <button class="btn" data-cls="two">2</button> <button class="btn" data-cls="three">3</button> <div class="bSres"></div> </body> </html> |
рони,
у меня, все равно почему-то при нажатии на одну из кнопок, вторая не работает, пока не нажму снова на предыдущую. И еще вопрос, как вывести полученный результат в другой див? 10 кнопок в разных блоках по 5 шт. Т.е. 5 дают одни свойства, например размер, а другие 5 создают фон. И эти 5 - 5 должны между собой переключаться. А сейчас, если я правильно понял, они как бы складываются. Вот: http://jsfiddle.net/k4cm2wnd/1/ |
Цитата:
Цитата:
|
madeas,
Цитата:
смотрите пост №9 |
может, лучше работать со стилями?
<!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() { var b = $('.btn'), cls = {}, str = ''; b.click(function() { cls = $(this).data("cls"); $('.bSm').css(cls); }); }); </script> </head> <body> <style> body{ background-color: #EEE8AA; } .bSm { display: block; background: #fff; width: 150px; height: 150px; border-radius: 8px; margin: 0 auto; } </style> <button class="btn" data-cls='{"width": "450px", "height": "675px", "border-radius": "38px"}'>1</button> <button class="btn" data-cls='{"width":"267px","height":"553px","border-radius":"18px"}'>2</button> <button class="btn" data-cls='{"background-color":"green"}'>5</button> <button class="btn" data-cls='{"background-color":"red"}'>6</button> <div class="bSm"></div> <div class="bSres"></div> </body> </html> |
Цитата:
|
рони,
это не Цитата:
<head> <title></title> <style> .gray { background-color: gray !important; } </style> </head> <body> <div id="id1" style="background-color: red!important" class="gray">red</div> </body> |
Часовой пояс GMT +3, время: 06:32. |