БЛОГ НА HUSL


Уникализация стилей в HTML через JQuery

Автор вопроса: kiris

Проблема 1: При добавлении ещё одного дела и нажатии на "раскрыть" первого блока, одновременно раскрывается и второй, нужно их как-то уникализировать при помощи jq, если это возможно. Не хочу просто из-за этой проблемы писать и как-то мудрить jq-код

Проблема 2: Скорее всего, вытекает из первой проблемы. Так же, при добавлении второго дела текст второго дела дублируется в блоке первого, при этом второй блок спокойно создаётся но без своего текста.

$(function () {
    $('button.addCase')
        .click(function () {
            var createCase = $(
                '<div class="list">' +
                '<div id="caseName" class="case">' +
                '<div id="cont-text">' +
                '</div>' +
                '<button id="buttonDel" class="delete">' + '</button>' +
                '<button id="buttonMore" class="list-more">' + '</button>' +
                '</div>' +
                '<div id="caseMore" class="more">' +
                '<p id="des-case">' + '</p>' +
                '</div>' +
                '</div>'
            );
            $('.left-case').append(createCase);
            $(function () {
                var inp_text = $('div.name-case input').val();
                var inpDes_text = $('div.description-case textarea').val();
                var outName = $(
                    '<p>'
                    + inp_text +
                    '</p>'
                );
                var outDes = $(
                    '<p>'
                    + inpDes_text +
                    '</p>'
                );
                $('#cont-text').prepend(outName);
                $('#caseMore').prepend(outDes);
                $('div.name-case input').val('').focus();
                $('div.description-case textarea').val('').focus();
                return false;
            });
            
            $('.list-more')
                .click(function () {
                    $('button.list-more').addClass('style')

                    // for (){

                    // } if (){

                    // } else {

                    // }


                    var moreCase = $('div.more');
                    if(moreCase.is(':visible')){
                        moreCase.slideUp(800, function () {
                            $("button.list-more").click(function() {
                                var imageUrl = "список2.jpg";
                                $(".list-more").css("background-image", "url(" + imageUrl + ")");
                            });
                        });
                    }
                    else {
                        moreCase.slideDown(800, function () {
                            $("button.list-more").click(function() {
                                var imageUrl = "список.jpg";
                                $(".list-more").css("background-image", "url(" + imageUrl + ")");
                            });
                        });
                    }
                });
            $('.delete')
                .click(function () {
                    var deleteCase = $('div.case');
                    if(deleteCase.is(':visible')){
                        deleteCase.slideUp(800);
                    }
                    var deleteMore = $('div.more');
                    if(deleteMore.is(':visible')){
                        deleteMore.slideUp(600);
                    }
                    var deleteName = $('#nameInCase');
                    if(deleteName.is(':visible')){
                        deleteName.slideUp(700);
                    }
                });
        });
});
html {
    padding: 0;
    margin: 0;
}
body {
    margin: 0;
    height: 600px;
    background-color: #f5f5f5;
    font-family: Arial, 'sans-serif';

}

p {
    margin: 0;
}

#container {
    width: 960px;
    height: 590px;
    margin: 64px 20% 85px 20%;
}

.left-case {
    width: 470px;
    height: 100%;
    margin-right: 10px;
}

.list-case {
    margin-bottom: 26px;
}

.text {
    color: #aeb6c3;
    font-size: 14px;
    width: 470px;
}

div.list p {
    color: #8993ad;
    padding-top: 10px;
}

#cont-text {
    position: absolute;
    width: 350px;
}

.case,
.case-2,
.case-3 {
    background-color: white;
    width: 470px;
    height: 50px;
    margin-top: 15px;
    margin-bottom: 1px;
}

.delete,
.delete-2,
.delete-3 {
    margin: 0 0 0 10px;
    padding-top: 10px;
    border: 0;
    background-color: white;
    background-image: url(удалить.jpg);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;

}

button.delete,
button.delete-2,
button.delete-3 {
    padding: 5px;
    margin: 15px 0 0 88%;
}


.list-more,
.list-more-2,
.list-more-3 {
    float: right;
    border: 0;
    background-color: white;
    background-image: url(список.jpg);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 15px 10px 0 0;
}

.style {
    background-image: url("список2.jpg");
}

div.case p,
div.case-2 p,
div.case-3 p {
    padding: 15px 20px 0 20px;
    color: black;
}

.more,
.more-2,
.more-3 {
    display: none;
    background-color: white;
    color: #aeb6c3;
    width: 100%;
    height: 85px;
    margin-bottom: 20px;
    font-size: 14px;
}

.more p,
.more-2 p,
.more-3 p{
    padding-left: 20px;
}

.right-case {
    position: relative;
    bottom: 590px;
    left: 480px;
    width: 470px;
    height: 100%;
    margin-left: 10px;
}

.add-new-cases {
    margin-bottom: 26px;
}

.add-new-cases,
.list-case {
    font-size: 21px;
}

.case-options {
    background-color: white;
    width: 470px;
    height: 540px;
}

.name-case {
    padding: 15px 40px 20px 40px;
}

div.name-case p {
    color: #adb4c5;
    font-size: 14px;
    margin-bottom: 10px;
}

div.name-case input {
    box-sizing: border-box;
    padding-left: 10px;
    border: 1px solid #ebebeb;
    background-color: #f5f5f5;
    width: 390px;
    height: 45px;
    font-size: 16px;
}

.description-case {
    padding: 0 40px 0 40px;
}

div.description-case p {
    color: #adb4c5;
    font-size: 14px;
    margin-bottom: 10px;
}

div.description-case textarea {
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    background-color: #f5f5f5;
    padding: 15px 0 0 10px;
    width: 390px;
    height: 230px;
    font-size: 16px;
    resize: none;
}

.addCase {
    font-size: 16px;
    background-color: #2174fd;
    color: white;
    width: 224px;
    height: 55px;
    text-align: center;
    margin: 30px 0 0 40px;
    border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <div class="left-case">
        <div class="list-case">Список дел:</div>
    </div>
    <div class="right-case">
        <div class="add-new-cases">Добавить новое дело:</div>
        <div class="case-options">
            <form action="" method="post">
                <div class="name-case">
                    <p><sup>*</sup> Название</p>
                    <input type="text" name="">
                </div>
                <div class="description-case">
                    <p><sup>*</sup> Описание</p>
                    <textarea name="name" cols="30" rows="10"></textarea>
                </div>
                <button type="button" class="addCase">Добавить дело</button>
            </form>
        </div>
    </div>
</div>

P.S. Не бейте палками, если там есть части кода в css, которые вообще не нужны, возможно что-то упустил при чистке.


Источник

Ответы (1 шт):

Автор решения: Михаил Ребров

Уникализировать ничего не нужно:

  • просто нужно уметь пользоваться относительным поиском
  • и отучиться от глобального поиска при любом возникшем случае.

Рекомендации

  1. Используйте локальный поиск в контексте одного элемента, вместо того чтобы искать элементы по всему документу.

Вот вы создали элемент

 var createCase = $(
                '<div class="list">' +
                '<div id="caseName" class="case">' +
                '<div id="cont-text" class="case_description">' +
                '</div>' +
                '<button id="buttonDel" class="delete">' + '</button>' +
                '<button id="buttonMore" class="list-more">' + '</button>' +
                '</div>' +
                '<div id="caseMore" class="more">' +
                '<p id="des-case">' + '</p>' +
                '</div>' +
                '</div>'
            );

так и ищите дальше в нем элементы и работайте с ними, вместо того чтобы искать по всему документу

createCase.find('.case_description').prepend(outName);
createCase.find('.more').prepend(outDes);
//...
createCase.find('.list-more').click(function () {
    // ...
});

Вы же ищете по всему документу и вставляете во все найденные

// так делать нельзя!
$('#caseMore').prepend(outDes);

отчего и получаете ошибки

  1. при обработке событий используйте элемент который стал источником события.
createCase.find('.list-more').click(function () {
    var moreButton = $(this); // сохранили в переменную moreButton элемент на котором возникло событие
    moreButton.addClass('style') // добавили класс style на этот элемент
    // ...
});

далее, пользуйтесь относительным поиском внутри него, чтобы добраться до нужных элементов.
Чтобы подняться на уровень выше и добраться до элементов, в соседнем блоке - используйте parent() чтобы перейти к родительскому элементу

var moreCase = $(this).parent().parent().find('div.more');

Решение

Иконки вставил те, что были под рукой. Загрузил их на файлообменник и обновил стили

$(function () {
    $('button.addCase')
        .click(function () {
            var createCase = $(
                '<div class="list">' +
                '<div id="caseName" class="case">' +
                '<div id="cont-text" class="case_description">' +
                '</div>' +
                '<button id="buttonDel" class="delete">' + '</button>' +
                '<button id="buttonMore" class="list-more">' + '</button>' +
                '</div>' +
                '<div id="caseMore" class="more">' +
                '<p id="des-case">' + '</p>' +
                '</div>' +
                '</div>'
            );

            var inp_text = $('div.name-case input').val();
            var inpDes_text = $('div.description-case textarea').val();
            var outName = $('<p>' + inp_text + '</p>');
            var outDes = $('<p>' + inpDes_text + '</p>');

            createCase.find('.case_description').prepend(outName);
            createCase.find('.more').prepend(outDes);

            $('.left-case').append(createCase);

            $('div.name-case input').val('').focus();
            $('div.description-case textarea').val('').focus();


            createCase.find('.list-more').click(function () {
                var moreButton = $(this);
                moreButton.addClass('style')
                var moreCase = $(this).parent().parent().find('div.more');
                if(moreCase.is(':visible')){
                    moreCase.slideUp(800, function () {
                        moreButton.removeClass("style");
                    });
                }
                else {
                    moreCase.slideDown(800, function () {
                        moreButton.addClass("style");
                    });
                }
            });
            createCase.find('.delete')
                .click(function () {
                    var deleteCase = $(this).parent();
                    if(deleteCase.is(':visible')){
                        deleteCase.slideUp(800);
                    }
                    var deleteMore = $('div.more');
                    if(deleteMore.is(':visible')){
                        deleteMore.slideUp(600);
                    }
                    var deleteName = $('#nameInCase');
                    if(deleteName.is(':visible')){
                        deleteName.slideUp(700);
                    }
                });
        });
});
html {
    padding: 0;
    margin: 0;
}
body {
    margin: 0;
    height: 600px;
    background-color: #f5f5f5;
    font-family: Arial, 'sans-serif';

}

p {
    margin: 0;
}

#container {
    width: 960px;
    height: 590px;
    margin: 64px 20% 85px 20%;
}

.left-case {
    width: 470px;
    height: 100%;
    margin-right: 10px;
}

.list-case {
    margin-bottom: 26px;
}

.text {
    color: #aeb6c3;
    font-size: 14px;
    width: 470px;
}

div.list p {
    color: #8993ad;
    padding-top: 10px;
}

#cont-text {
    position: absolute;
    width: 350px;
}

.case,
.case-2,
.case-3 {
    background-color: white;
    width: 470px;
    height: 50px;
    margin-top: 15px;
    margin-bottom: 1px;
}

.delete,
.delete-2,
.delete-3 {
    margin: 0 0 0 10px;
    padding-top: 10px;
    border: 0;
    background-color: white;
    background-image: url("https://i.stack.imgur.com/xJl8R.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;

}

button.delete,
button.delete-2,
button.delete-3 {
    padding: 5px;
    margin: 15px 0 0 88%;
}


.list-more,
.list-more-2,
.list-more-3 {
    float: right;
    border: 0;
    background-color: white;
    background-image: url("https://i.stack.imgur.com/J12Oe.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 15px 10px 0 0;
}

.style {
    background-image: url("https://i.stack.imgur.com/e7FPn.png");
}

div.case p,
div.case-2 p,
div.case-3 p {
    padding: 15px 20px 0 20px;
    color: black;
}

.more,
.more-2,
.more-3 {
    display: none;
    background-color: white;
    color: #aeb6c3;
    width: 100%;
    height: 85px;
    margin-bottom: 20px;
    font-size: 14px;
}

.more p,
.more-2 p,
.more-3 p{
    padding-left: 20px;
}

.right-case {
    position: relative;
    bottom: 590px;
    left: 480px;
    width: 470px;
    height: 100%;
    margin-left: 10px;
}

.add-new-cases {
    margin-bottom: 26px;
}

.add-new-cases,
.list-case {
    font-size: 21px;
}

.case-options {
    background-color: white;
    width: 470px;
    height: 540px;
}

.name-case {
    padding: 15px 40px 20px 40px;
}

div.name-case p {
    color: #adb4c5;
    font-size: 14px;
    margin-bottom: 10px;
}

div.name-case input {
    box-sizing: border-box;
    padding-left: 10px;
    border: 1px solid #ebebeb;
    background-color: #f5f5f5;
    width: 390px;
    height: 45px;
    font-size: 16px;
}

.description-case {
    padding: 0 40px 0 40px;
}

div.description-case p {
    color: #adb4c5;
    font-size: 14px;
    margin-bottom: 10px;
}

div.description-case textarea {
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    background-color: #f5f5f5;
    padding: 15px 0 0 10px;
    width: 390px;
    height: 230px;
    font-size: 16px;
    resize: none;
}

.addCase {
    font-size: 16px;
    background-color: #2174fd;
    color: white;
    width: 224px;
    height: 55px;
    text-align: center;
    margin: 30px 0 0 40px;
    border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <div class="left-case">
        <div class="list-case">Список дел:</div>
    </div>
    <div class="right-case">
        <div class="add-new-cases">Добавить новое дело:</div>
        <div class="case-options">
            <form action="" method="post">
                <div class="name-case">
                    <p><sup>*</sup> Название</p>
                    <input type="text" name="">
                </div>
                <div class="description-case">
                    <p><sup>*</sup> Описание</p>
                    <textarea name="name" cols="30" rows="10"></textarea>
                </div>
                <button type="button" class="addCase">Добавить дело</button>
            </form>
        </div>
    </div>
</div>

Результат

введите сюда описание изображения

→ Ссылка

licensed under cc by-sa 3.0 with attribution.