【发布时间】：2016-02-17 03:55:39
【问题描述】：
我最近在编码挑战中失败了，但我一直在努力完成它以获取未来的知识。当用户使用 JavaScript/jQuery 单击时，我正在尝试更改单个文本字母。在发生这种情况之前，必须采取一些步骤。除了步骤编号“3”之外，我已完成以下所有步骤。
路线：
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里吗？
-
首先，每个单词需要一个计数器。
-
@HarshSanghani: jsfiddle.net/46vds67p/1
-
点击字母和点击单词的交互不清楚。伪代码表示介绍中未说明的功能。
-
我认为计数器是个坏主意。通过查看存在哪些类来检测单词的状态可能会更好。
标签： javascript jquery html css