Так что я делаю приложение To do, и я пытаюсь добавить потрясающие шрифты иконки, чтобы показать галочку при каждом нажатии кнопки завершения. Я не могу добавить его через HTML, потому что список динамически меняется через JS. Вот if / else, который печатает выполненные и незавершенные задачи.

  if (todo.completed === true) {
    todoTextDone = '(X)' + todo.todoText; // <i class="fa fa-check" aria-hidden="true"></i>
  } else {
    todoTextDone = '( )' + todo.todoText;
  }

Я пробовал document.write, document.querySelectory, document.getElementById. Я попытался создать класс CSS и выбрать его из JS, но это выдает ошибку коллекции объектов. Я попытался нацелить на li, чтобы у него был отличный шрифт Icon в CSS, и это тоже не сработало! Я пытаюсь использовать их неправильно? По всей теории, метод document.write должен был работать, потому что он вставляет HTML в DOM, так что мне здесь не хватает?

-3
rico042002 7 Янв 2017 в 07:18

3 ответа

Лучший ответ

Всегда имейте значок, затем используйте CSS, чтобы скрыть его в зависимости от состояния элемента (здесь обозначается классом):

#toDo {
  padding: 0;
  list-style-type: none
}

#toDo li .fa {
  color: green
}
#toDo li.open .fa {
  opacity: 0
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul id="toDo">
  <li class="open"><i class="fa fa-check" aria-hidden="true"></i> First item</li>
  <li class="done"><i class="fa fa-check" aria-hidden="true"></i> Second item</li>
</ul>

Не используйте document.write() кстати.

0
Chris G 7 Янв 2017 в 04:38

Этот фрагмент использует только CSS и таблицу стилей Font-Awesome . Если вы предпочитаете другие форматы, обратитесь к шпаргалке

< Сильный > SNIPPET

.chx {
  display: none;
}
.chx + label {
  color: #222;
  font-size: 18px;
  line-height: 100%;
}
.chx + label span {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: baseline;
  cursor: pointer;
}
.chx + label span {
  background: #666;
  line-height: 100%;
}
.chx + label span {
  line-height: 100%;
}
#chx1:checked + label span:before {
  content: '\f00c';
  color: #F00;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 20px;
}
#chx2:checked + label span:before {
  content: '\f04b';
  color: #0ff;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 20px;
}
#chx2 + label span:before {
  content: '\f04c';
  color: #0ff;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 20px;
}
#chx2:checked + label span:after {
  content: 'Play';
}
#chx2 + label span:after {
  content: 'Pause';
  font-family: Verdana;
  margin-left: 5px;
}
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<input id='chx1' class='chx' type='checkbox'>
<label for='chx1'><span></span>
</label>
<hr>
<input id='chx2' class='chx' type='checkbox'>
<label for='chx2'><span></span>
</label>
0
zer00ne 7 Янв 2017 в 05:33

Сначала вы должны создать элемент

var iEl = document.createElement('i');  
iEl.style.className = "fa fa-check";  
document.getElementById("yourElementId").appendChild(iEl);  
-1
nivas 7 Янв 2017 в 04:29