Присвоение класса и передача свойств
Привет всем! Нужна помощь со скриптом.
Есть примерно 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>
|
рони,
что не понятно .green ниже всех он и задает цвет фона, class="gray green fuchsia" // тут порядок значения иметь не будет
<head>
<title></title>
<style>
.gray
{
background-color: Gray !important;
}
.fuchsia
{
background-color: Fuchsia !important;
}
.green
{
background-color: Green !important;
}
</style>
</head>
<body>
<div id="id1" class="gray green fuchsia">red</div>
</body>
|
или что вы имеете ввиду под первый добавленный?
|
j0hnik,
ок тег спутал с атрибутом вы правы, срабатывает класс добаввленный последним в css. |
я так понял, что переключение поочередное не получится сделать. Через input type=radio тоже не получается. Приходится повторно жать и только потом следующую (
Подскажите еще, как вывести выбранные классы в блок bSres с той же структурой, как и в css? Например, если я щелкну на класс three я смог скопировать код целиком, т.е. так:
<div class="bsm three"></div>
<style>
.bSm {
display: block;
background: #fff;
width: 150px;
height: 150px;
border-radius: 8px;
margin: 0 auto;
}
.three {
width: 267px;
height: 553px;
border-radius: 18px;
}
</style>
|
Цитата:
|
Цитата:
|
рони,
да там все тоже самое только вместо button стоит input. Осталось вывести классы со стилями в контейнер. С остальным вроде понял куда двигаться. |
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 that = this;
b.each(function() {
var cls = $(this).data("cls");
that == this ? $('.bSm').toggleClass(cls) : $('.bSm').removeClass(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>
|
рони,
я сделал по примеру Dilettante_Pro, все переключается. Но не могу понять, классы меняются или просто добавляются следом. |
Dilettante_Pro,
Все работает, код настроил как надо. Спасибо. А как можно вывести полученные классы и стили в input? Вот сам контейнер https://jsfiddle.net/7zuqrb8o/ В нем 4 инпута, 2 отвечают за размер, другие 2 за цвет. Нужно, чтобы в результате появились добавленные стили. Например, если я нажму 1 и 4, то в результате у меня должно отразиться как-то так:
#bSm {
display: block;
width: 200px; /* присвоено новое значение. изначально было 100 */
height: 150px; /* присвоено новое значение. изначально было 100 */
margin: 0 auto;
background-color: #333; /* добавлен 4 */
color: #fff; /* добавлен 4 */
}
Думаю, что надо через form_code.innerHTML =+, но я пока не представляю как это лучше сделать. |
Заменил input на textarea, получилось вот так https://jsfiddle.net/7zuqrb8o/30/ Осталось понять, как вывести стили в пустые + ' ' + :-E
А можно как-нибудь добавить через переменные типа как с датой, месяцем и пр.? Например, я создаю переменную var day = d.getDate(); и помещаю ее в код |
Есть еще вариант, но не знаю на сколько он хорош.
Можно заменить все label - input на button с вызовом функций, например:
<button onclick="addStyle2()">2</button>
<script>
function addStyle2() {
document.getElementById("bSd").style.width = "250px";
document.getElementById("bSd").style.height = "150px";
}
</script>
но тут тоже остается вопрос, как обернуть эти функции в var = aS2, чтобы их можно было потом вывести в textarea через innerHTML. Пока не понимаю как должен выглядеть окончательный скрипт... |
madeas,
В примере пост 8 и в ваших радио они уже в объектах - бери и выводи, одновременно с установкой |
Dilettante_Pro,
а подскажите еще, пожалуйста. Можно ли вывести значение value в data-cls, если я добавляю
<input type="color" id="bg_choose" class="btn" name="bg" value="#fe9216" data-cls="{вот сюда}">
Это нужно потому, что скрипт меняет стили в диве, но в textarea остаются только background-color: black или white, нажатые ранее. |
решено. все работает. всем большое спасибо. буду дальше разбираться с классами ))
|
| Часовой пояс GMT +3, время: 23:23. |