применить текстовое оформление: линия к сгенерированным флажкам - PullRequest
Новая
       44

применить текстовое оформление: линия к сгенерированным флажкам

0 голосов
/ 19 февраля 2019

Я заканчиваю работу над последним приложением, которое я создаю.В основном пользователи генерируют задачи, которые отображаются на экране вместе с флажком и значком корзины справа от него.По большей части приложение работает как надо.Последнее, что мне нужно сделать, это сделать так, чтобы, когда пользователь нажимал на флажок, происходил эффект text-художественное оформление: сквозной переход и зачеркивался соответствующий элемент списка.Раньше у меня это работало, но мне приходилось перемещаться вокруг некоторых вещей, чтобы изменение размера экрана выглядело лучше.Теперь мой старый способ не сработает.Я опубликую некоторый код, и если кто-нибудь знает, как я могу заставить это работать, я был бы очень признателен.Спасибо всем!

Входные данные: флажок + li css ниже - это то, что первоначально работало до того, как мне пришлось изменить порядок создания элементов списка.

    ul {
text-align:right; /*This pushes the checkbox/trash can right while the <li> in the js file floats the todo text left*/
list-style-type:none;
padding-left:0px; /*Makes up for not having the bullet point spacing on smaller screens*/ 
font-size:24px;
color:white;
font-weight:600;
}
li {      
text-align:left;
}
input:checked + li {     /*<<<<<------This is what I was using before and it worked*/
  text-decoration:line-through;
}


.todo-item::after {
  content: "";
  clear: both;
  display: table;  
}

.todo-item {
  text-align: right;
}

.todo-item .todo-label {
  display: block;
  float: left;
  max-width: 80%; /*  you can increase the size */
  text-align: left;
  /* you can use this props if you don't want another line 
  white-space: nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden; */

}
    </style>
</head>
<body>
    <div class="header">
        <div class="container" style="padding-top:50px;"> 
            <div class="row justify-content-center"> <!--Input Box-->
                <div class="col-sm-12 col-lg-8">
                    <h1>To-Do List</h1>
                    <div class="form-group">
                        <input type="text" class="form-control" id="task">
                    </div>
                </div>
            </div>
            <div class="row"> <!--Add Button-->
                <div class="col"></div>
                <div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
                    <button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
                </div>
            </div>
        </div>
    </div>
        <div class="container text" style="display:inline-block;"> <!--ToDos-->
            <div class="row justify-content-center" style="margin-top:20px;"> 
                <div class="col-sm-12 col-sm-8">
                    <div id="todos"></div>
                </div> 
            </div>
        </div>
<script src="todo.js"></script>
</body>
</html>

Вот javascript, используемый для разработки элементов списка задач.Перед перестановкой флажок был сгенерирован перед элементом списка задач.Теперь это было перенесено на после.Я подумал, что могу просто изменить свой порядок CSS или, возможно, вынуть раздел li и заменить его классом.Мне здесь не очень повезло. 

function show() {
var todos = get_todos();

var html = '<ul>';
for(var i=0; i < todos.length; i++) {
    html += '<li class="todo-item">' + 
      '<span class="todo-label">' + todos[i] + '</span>' +
      '<input class="checkBox" type="checkbox">' +
      '<button class="remove" id="' + i  + '">' + 
      '<i class="fa fa-trash" aria-hidden="true"></i>' + 
      '</button>' +
  '</li>';
};
html += '</ul>';    
document.getElementById('todos').innerHTML = html;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
};
}

enter image description here

1 Ответ

0 голосов
/ 19 февраля 2019

Довольно простой способ добавления сквозного эффекта при щелчке флажка и удаления эффекта, когда флажок снят, заключается в использовании метода toggle для переключения готового класса со сквозным эффектом.Этот класс не должен быть включен по умолчанию, потому что вы не хотите, чтобы эффект прохода был сразу.Когда вы установите флажок, он включит класс.Когда вы снимите флажок, он отключит класс.

HTML должен выглядеть примерно так: 

<ul>
    <li> Todo Item <input .....> </li>

Затем создайте CSS-класс для переключения кода: 

.lineThrough {
    text-decoration: line-through;
}

Код jQuery будет выглядеть так: 

$("ul").on("click", "li", function(){
    $(this).toggleClass("lineThrough");
});
...