【问题标题】:How to tap text on a Screen and select word如何点击屏幕上的文本并选择单词
【发布时间】:2014-07-19 18:35:27
【问题描述】:

我一直在谷歌上搜索有关如何允许用户在手机或平板电脑上点击段落中的单词以及他们点击的单词带来动作的最佳方法。

为了在任何设备上获得最佳性能,并且文本是动态的,使用 Jquery 的最佳方法是什么?

我在考虑动态添加文本并拆分单词并将它们添加到标签中,并让每个标签单击事件,但不确定是否有更好的解决方案?

谢谢

【问题讨论】:

  • 我想我们在这里需要更多细节。文本是用户输入的吗?文本中的每个单词是否具有不同的功能,或者说,每个段落有 2 个单词可能会导致功能。
  • 如果通过数据库和拆分,文本将被带入,并且最多大约 25 个单词。一旦一个单词被点击,它会执行另一个功能,然后检查匹配并发出单词。

标签: jquery mobile tablet


【解决方案1】:

好吧,这里是“第一批” - FIDDLE

该数组表示您从数据库中读取的内容。

用数组单词填充文本区域,将每个单词放在一个带有适当标签 ID 的跨度中。

点击跨度,在这个小提琴中,id会弹出,但你可以做任何你想做的事情。

如果您能提供更多细节,也许我们可以进一步完善它。

“拆分”文本是什么意思?

JS

var primarytext = ['Lorem','ipsum','dolor','sit','amet','consectetur','adipisicing','elit','sed','do','eiusmod','tempor','incididunt','ut','labore','et','dolore'];

populate();
$('span').on('click', function(){
     $('.putmehere').html(  $(this).attr( 'id' ) );
});

function populate()
{
 for(var n=0; n < primarytext.length; n++)
    {
      $('.mytextdiv').append('<span id=' + n + " '>" + primarytext[n] + ' </span>');
     } 
}

【讨论】:

  • 这就是我的想法,但我想使用“跨度”而不是“标签”会更快,因为它的体积更小?
  • 有多种方法可以处理这个问题,但任何内联元素都可以。您可以将文本保留为单个字符串,但随后您必须对字符串中发生单击的位置进行编码,抓取空格前后的元素,创建一个新字符串等。对我来说,跨度似乎最简单的。一旦你抓住一个词,你就可以将它与某物进行比较,然后将它呈现给一个会“发声”的声音算法。
  • 因为这是被放入 HTML5,我可以不使用
  • 我认为
  • 这里有一些东西可以帮助您开始使用 Google 音频文件和 html5 音频标签。jsfiddle.net/TjzH5 - 只需点击“马”这个词。
猜你喜欢
  • 1970-01-01
  • 2018-02-10
  • 1970-01-01
  • 1970-01-01
  • 2017-06-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-04
相关资源
最近更新 更多