Форум

j0hnik · #11 (**permalink**) 20.07.2018, 23:20

рони,
что не понятно .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 · #12 (**permalink**) 20.07.2018, 23:23

или что вы имеете ввиду под первый добавленный?

рони · #13 (**permalink**) 21.07.2018, 00:04

j0hnik,
ок тег спутал с атрибутом
вы правы, срабатывает класс добаввленный последним в css.

madeas · #14 (**permalink**) 21.07.2018, 15:46

я так понял, что переключение поочередное не получится сделать. Через 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>

рони · #15 (**permalink**) 21.07.2018, 16:00

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

я так понял, что переключение поочередное не получится сделать.

при желании можно, пост №8 немного доработать

рони · #16 (**permalink**) 21.07.2018, 16:02

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

Через input type=radio тоже не получается

где код?

madeas · #17 (**permalink**) 21.07.2018, 16:12

рони,
да там все тоже самое только вместо button стоит input. Осталось вывести классы со стилями в контейнер. С остальным вроде понял куда двигаться.

рони · #18 (**permalink**) 21.07.2018, 16:12

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>

madeas · #19 (**permalink**) 21.07.2018, 16:17

рони,
я сделал по примеру Dilettante_Pro, все переключается. Но не могу понять, классы меняются или просто добавляются следом.

madeas · #20 (**permalink**) 22.07.2018, 17:58

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 =+, но я пока не представляю как это лучше сделать.

Форум

Справочник

Discord чат

Курсы javascript