Недавно я не смог выполнить вызов по кодированию, но все равно пытался его заполнить для будущих знаний. Я пытаюсь изменить отдельные буквы текста при нажатии на пользователя с помощью JavaScript/jQuery. Перед этим нужно предпринять несколько шагов. У меня есть все шаги ниже, кроме шага номер 3.Попытка изменить отдельные буквы текста при нажатии на JavaScript
Направления:
1.) зависший курсор на или ниже слово вызывает подчеркивание бар появляться.
2.) При нажатии на слово, когда отображается строка, отображается новый блок со словом в нем.
3.) Цвет каждой буквы изменяется, нажимая на каждую букву. Каждая буква должна измениться до того, как будет выполнен следующий шаг.
4.) Щелчок по выделенному слову подчеркивает слово «оранжевый».
5.) Повторное нажатие на выделенное слово изменит цвет на «красный».
6.) Повторное нажатие на выделенное слово приведет к сбросу слова.
Ниже я реализовал некоторые псевдо-код в index.js файл для того, что я думаю, что было бы логично работать, но я не слишком уверен, как идти о настройке вместе:
HTML:
<div class="word_div">
<p class="default_word_style"><span class="inner_default_word_style">It's</span></p>
<p class="default_word_style"><span class="inner_default_word_style">no</span></p>
<p class="default_word_style"><span class="inner_default_word_style">use</span></p>
<p class="default_word_style"><span class="inner_default_word_style">going</span></p>
<p class="default_word_style"><span class="inner_default_word_style">back</span></p>
<p class="default_word_style"><span class="inner_default_word_style">to</span></p>
<p class="default_word_style"><span class="inner_default_word_style">yesterday</span></p>,
<p class="default_word_style"><span class="inner_default_word_style">because</span></p>
<p class="default_word_style"><span class="inner_default_word_style">I</span></p>
<p class="default_word_style"><span class="inner_default_word_style">was</span></p>
<p class="default_word_style"><span class="inner_default_word_style">a</span></p>
<p class="default_word_style"><span class="inner_default_word_style">different</span></p>
<p class="default_word_style"><span class="inner_default_word_style">person</span></p>
<p class="default_word_style"><span class="inner_default_word_style">then</span></p>.
</div>
</div>
</div>
CSS:
.default_word_style {
padding-bottom: 1em;
display: inline;
}
.default_word_style:hover {
text-decoration: underline;
color: orange;
}
.inner_default_word_style {
color: black;
}
.inner_default_word_style:hover {
color: black;
}
.blue {
color: blue;
background-color: purple;
}
.bold_orange {
color: orange;
}
.red {
color: red;
}
.purple {
color: purple;
}
.added_word {
background-color: orange;
color: white;
width: 10%;
text-align: center;
}
.display_none {
display: none;
}
JavaScript
$(function(){
counter = 0;
var word = '';
$('.inner_default_word_style').click(function(){
counter += 1;
if (counter == 1){
word = $(event.target).html();
$(event.target).append('<div class="added_word">' + word + '</div>');
} else if (counter == 2){
// 1.) When a letter is clicked, change its 'color' to 'purple'.
// 2.) Check the string in which the letter is in to see if all the
// letters of that string have been clicked on.
// 3.) IF all the letters in that string HAVE been clicked, 'counter += 1'
// so that the next click has a 'counter' = '3'.
// ELSE
// 4.) IF all the letters have NOT been clicked on, 'counter -= 1'
// so that the next click has a 'counter' = '2' again. Repeat steps 1-3.
} else if (counter == 3){
$(".added_word").remove();
$(event.target).addClass('bold_orange');
}else if (counter == 4){
$(event.target).addClass('red');
} else if (counter == 5){
$(event.target).removeClass('red bold_orange');
counter = 0;
}
console.log(counter);
});
});
Кроме того, мне нужно поставить метки вокруг каждого отдельного письма предназначаться это письмо при нажатии?
Можете ли вы поместить свой код в jsfiddle? –
Письмо или слово? –
Для начала вам понадобится один счетчик на каждое слово. –