javascript - 单击使用 JavaScript 时尝试更改单个文本字母

Question

我最近在一次编码挑战中失败了，但无论如何我都在努力完成它以备将来学习。当用户使用 JavaScript/jQuery 单击时，我试图更改文本的各个字母。在发生这种情况之前必须执行几个步骤。除了步骤号“3”之外，我执行了以下所有步骤。

方向:

1.) 将光标悬停在单词上方或下方会导致出现下划线。
2.) 当栏出现时点击一个单词会显示包含单词的新 block 。
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);
  });
});

此外，我是否需要在每个单独的字母周围放置标签以便在单击时定位该字母？

Answer 1

我来了。我将单词分成 span，然后将它们与点击事件绑定(bind)。

目前这是第 1 步和第 3、4、5、6 步。

我不明白第 2 步。

$(function() {
  $('#tar > p').each(function(index, word) {
    word = $(word);

    var originalText = word.text();
    var newText = "";

    for (var i = 0; i < originalText.length; i++) {
      newText += '<span>' + originalText[i] + '</span>';
    }

    word.html(newText);

    word.hover(function() {
      word.addClass('underline');
    }, function() {
      word.removeClass('underline');
    });

    word.find('span').each(function(index, letter) {
      letter = $(letter);

      letter.click(function(e) {
        if (word.hasClass('wordstage2') || word.hasClass('wordstage1')) return;
        letter.addClass('colorText');
      });
    });

    word.click(function() {
      if (word.hasClass('wordstage2')) {
        word.removeClass('wordstage2');
      } else if (word.hasClass('wordstage1')) {
        word.removeClass('wordstage1');
        word.addClass('wordstage2');
      } else if (word.children().length == word.children(".colorText").length) {
        word.find('span').each(function(index, letter) {
          letter = $(letter);
          letter.removeClass('colorText');
        });

        word.addClass('wordstage1');
      }

    })
  });
});

.underline {
  text-decoration: underline;
}
.colorText {
  color: blue;
}
.wordstage1 {
  color: orange;
}
.wordstage2 {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div id="tar">
    <p>It's<p/> 
    <p>no<p/> 
    <p>use<p/> 
    <p>going<p/> 
    <p>back<p/> 
    <p>to<p/> 
    <p>yesterday<p/>, 
    <p>because<p/> 
    <p>I<p/> 
    <p>was<p/> 
    <p>a<p/> 
    <p>different<p/> 
    <p>person<p/> 
    <p>then<p/>. 
</div>