时间戳

首页 > 解决方案 > 显示选定的单词 [Javascript]

javascript - 显示选定的单词 [Javascript]

问题描述

用鼠标单击时，句子中的单词会突出显示。它就在这里工作。

但; 不幸的是，使用按钮显示所选单词不起作用。

JSFiddle

words = [];
var sentence = $('.sentence').html().split(/\s+/),
  result = [];


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

$('.sentence').html(result.join(' '));

if (a.indexOf(" ") + 1) {
  alert('fail: ' + a);
} else {
  words.push(a);
}

$('.sentence').on('click', 'span', function() {
  $(this).addClass('highlight');
});

$('button').click(function() {
  alert(words);
});

$('$selectedWords').innerHTML = words;
.sentence span:hover,
.highlight {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aliquam totam odit excepturi reiciendis quam doloremque ab eius quos maxime est deleniti praesentium. Quia porro commodi blanditiis iure dicta voluptatibus.</p>



Selected words:
<p id="selectedWords"></p>

<button>Show in alert</button>

标签： javascriptjqueryhighlight

解决方案

看看我整理的 JSFiddle 作为起点。这不是最好的，但希望能引导你朝着正确的方向前进。

https://jsfiddle.net/qt9hgbkp/

为示例提供支持的 javascript...

/**
 * Sentence element
 * @var {Object}
 */
var $sentence = $('.sentence');

/**
 * Selected words output element
 * @var {Object}
 */
var $selected = $('#selectedWords');

/**
 * Wrap each word in a sentence in a span
 * @param {String} sentence
 * @return {String}
 */
function wrapSentence(sentence) {
    // Get element contents and split by whitespace
  var words = $sentence.text().split(/\s+/);
  // Create an empty array for storing wrapped elements
  var wrapped = [];

  // Loop through each word and wrap
  for (var i = 0; i < words.length; i++) {
    wrapped.push('<span>' + words[i] + '</span>');
  }

    // Combine words into a string
  return wrapped.join(' ');
}

/**
 * Find all selected words in $sentence element
 * @return {Array}
 */
function getSelected() {
    // Create an empty array for storing selected words
  var selected = [];

  // Find all spans with the highlight class
  $sentence.find('span.highlight').each(function() {
    // Push span values to array
    selected.push($(this).text());
  });

  // Return results
  return selected;
}

/**
 * Override original html with wrapped
 */
$sentence.html(wrapSentence());

/**
 * Handle click event for each span in sentence
 */
$sentence.on('click', 'span', function() {
    // Add/remove the highlight class
    $(this).toggleClass('highlight');
  // Update the selected output
  $selected.text( getSelected().join( ', ' ) );
});

/**
 * Alert the user with selected words
 */
$('button').on( 'click', function() {
    alert( getSelected() );
} );

推荐阅读