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

Question

我最近没有遇到编码挑战，但一直试图完成它以备将来的知识。我试图在用户使用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);
  });
});

此外，点击后，我是否需要在每个字母周围放置标记以定位该字母？

Answer 1

这是我的去处。我将单词拆分为跨度，然后用click事件绑定它们。

目前这是步骤1和3,4,5,6。

我不理解第2步。

＆＃13;

＆＃13;

$(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');
      }

    })
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为此，每个单词需要一个计数器，而不是你可以实现这一点，我在你的代码中使用id。

$(function(){
  counter = 0;
  var Elementcounter = {}; // to handle counter for each element
  var word = '';
  $('.inner_default_word_style').click(function(event){
   
      if(!isNaN(Elementcounter[event.target.id])){  
           Elementcounter[event.target.id] += 1;
     }else{
           Elementcounter[event.target.id] = 1;
     }
    counter =  Elementcounter[event.target.id]

    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 purple');
      counter = 0;
    }
    console.log(counter);
  });
      });

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="word_div">
      <p class="default_word_style"><span class="inner_default_word_style" id="e1">It's</span></p>
      <p class="default_word_style"><span class="inner_default_word_style" id="e2" >no</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e3" >use</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e4" >going</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e5" >back</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e6" >to</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e7" >yesterday</span></p>,
      <p class="default_word_style"><span class="inner_default_word_style"  id="e8" >because</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e9">I</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e10">was</span></p>
      <p class="default_word_style"><span class="inner_default_word_style"  id="e11" >a</span></p>
      <p class="default_word_style"><span class="inner_default_word_style" id="e12" >different</span></p>
      <p class="default_word_style"><span class="inner_default_word_style" id="e13" >person</span></p>
      <p class="default_word_style"><span class="inner_default_word_style" id="e14" >then</span></p>.
    </div>
  </div>
</div>

Answer 3

尝试这一点，可能的优势是在可以添加到的数组中定义了循环颜色更改。

var wordColors = ['black', 'bold_orange', 'red'];
var clss = { 'highlight':'purple' , 'dummy':'dummy' };

// Wrap all words in `<span class="word">....</span>`
var str = $('.word_div').text().split(/\s/).map(function(word) {
    return '<span class="word ' + wordColors[0] + '">' + word + '</span>';
});
$('.word_div').html(str.join(' '));

$('span.word').each(function(i, word) {
    // Wrap all letters in `<span class="letter">.</span>`
    var $word = $(word);
    var letters = $word.text().split('');
    str = letters.map(function(letter) {
        return '<span class="letter">' + letter + '</span>';
    });
    $word.html(str.join(''));
    str.length = 0;
}).on('click', function() {
    $word = $(this);
    $("#currentWord").text($word.text());
    var $letters = $word.find("span.letter");
    if($letters.not('.'+clss.highlight).not('.'+clss.dummy).length === 0) {
        $letters.off('click').removeClass(clss.highlight).addClass(clss.dummy);
        $.each(wordColors, function(i, color) {
            if($word.hasClass(color)) {
                var colorIndex = (i + 1) % wordColors.length;
                $word.removeClass(color).addClass(wordColors[colorIndex]);
                if(colorIndex === 0) {
                    $letters.removeClass(clss.dummy).on('click', letterClick); // reset
                }
                return false; // break
            }
        });
    }
});
function letterClick() {
    $(this).addClass(clss.highlight);
}
$('span.letter').on('click', letterClick);

https://jsfiddle.net/46vds67p/2/

尝试添加绿色＆＃39;绿色＆＃39;到wordColors，以及相应的CSS指令。