» Изменение свойств элемента (продвинутый вариант)

Работа)

Сейчас занимаюсь своим делом на платформе Wildberries, созданием украшений из бисера под брендом «NOBRILLIANTS». Вот наши работы:

Как можно уже понять, я очень стремлюсь к развитию всех сторон свой жизни, поэтому если хотите узнать меня получше, то добро пожаловать в мой ТЕЛЕГРАММ КАНАЛ: @neffedovvaveshaet .

<div class="results-container">
                            <div id="results167">
                                <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
                                <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                                <div class="controls">
                                    <div class="brand-wrap">
                                        <h3>Select a color</h3>
                                        <div class="brand">
                                            <label for="brand-jquery">Blue</label>
                                            <input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
                                            <label for="brand-jquery-ui">Red</label>
                                            <input type="radio" name="brand" id="brand-jquery-ui" data-background-color="red" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked>
                                            <label for="brand-jquery-mobile">Green</label>
                                            <input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="green" data-color="red" data-background-image="url(images/jquery-mobile.png)">
                                            <label for="brand-sizzle">Yellow</label>
                                            <input type="radio" name="brand" id="brand-sizzle" data-background-color="yellow" data-color="yellow" data-background-image="url(images/sizzle.png)">
                                            <label for="brand-qunit">Black</label>
                                            <input type="radio" name="brand" id="brand-qunit" data-background-color="black" data-color="#9C3493" data-background-image="url(images/qunit.png)">
                                        </div>
                                    </div>
                                    <div class="shape-wrap">
                                        <h3>Select a shape</h3>
                                        <div class="shape-bar">
                                            <label for="shape-circle">Circle</label>
                                            <input type="radio" name="shape" id="shape-circle" value="circle" checked>
                                            <label for="shape-square">Square</label>
                                            <input type="radio" name="shape" id="shape-square" value="square">
                                            <label for="shape-pill">Pill</label>
                                            <input type="radio" name="shape" id="shape-pill" value="pill">
                                            <label for="shape-rectangle">Rectangle</label>
                                            <input type="radio" name="shape" id="shape-rectangle" value="rectangle">
                                        </div>
                                    </div>
                                    <div class="toggle-wrap">
                                        <h3>Customize</h3>
                                        <div class="toggles">
                                            <label for="border">Border</label>
                                            <input class="toggle" type="checkbox" name="border" id="border">
                                            <label for="background-color">Background</label>
                                            <input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
                                        </div>
                                    </div>
                                    <div class="shape circle background jquery-ui"></div>
                                </div>
                            </div>
                        </div>

$(function () {
    function handleShape(e) {
        $(".shape").removeClass("circle pill square rectangle").addClass($(e.target).val())
    };

.shape {
                                margin-left: 4em;
                                margin-top: 2.5em;
                                height: 8em;
                                width: 8em;
                                box-shadow: 4px 4px 8px;
                                color: #ccc;
                                background-repeat: no-repeat;
                                background-size: 90%;
                                background-position: 50%;
                            }

.circle, .pill {
                                border-radius: 8em;
                            }

.pill, .rectangle {
                                width: 16em;
                            }

.square, .circle {
                                margin-left: 9em;
                            }

.border {
                                border: 2px solid #333333;
                            }

.toggles {
                                width: 200px;
                            }

.toggle-wrap, .shape {
                                display: inline-block;
                                vertical-align: top;
                            }

.controls {
                                background: #ccc;
                                padding: 1em;
                                display: inline-block;
                            }

.editors-buttons {
                                display: none;
                            }

ANASTASIA NEFEDOVA

Results:

Select a color

Select a shape

Customize