交互式文本突出显示并提交到后端

Question

我想创建一个网页荧光笔，它将在屏幕上显示几个段落，然后允许用户通过突出显示文本的一部分然后单击一个按钮（或输入一个数字，就像雷鸟中的情况一样）。然后我希望能够将此文本实质上提交给某种后台引擎。

我已经成功地构建了一些 jsfiddle 代码，但是无法打开文本的颜色变化并且不确定如何让文本提交到后端例程。

此代码段并未完全发挥作用，但它是朝着正确方向迈出的一步...

function myFunction1() {
  $("select#select1").change(function() {
    var color1 = $(this).val()
    $('#selectParagraph1').css('color', color1);
    $('#select1').css('color', color1);
  });
}

function myFunction2() {
  $("select#select2").change(function() {
    var color2 = $(this).val()
    $('#selectParagraph2').css('color', color2);
    $('#select2').css('color', color2);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table border="1" cellpadding="0">
  <tr>
    <td>
      <div id="selectParagraph1">This is the first paragraph</div>
    </td>
    <td>
      <select name="select1" id="select1" onclick="myFunction1()">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option selected="selected" value="black">black</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <div id="selectParagraph2">This is the second paragraph </div>
    </td>
    <td>
      <select name="select2" id="select2" onclick="myFunction2()">
        <option value="red">red</option>
        <option selected="selected" value="blue">blue</option>
        <option value="green">green</option>
        <option value="black">black</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

要突出显示文本，您可以用任何元素（例如 span）将其包裹起来，并将其背景设置为所需的颜色：

$('select').on('change', function() {
  var $this = $(this),
      color = $this.val(),
      textContainer = $this.closest('tr').find('.paragraph');
      
  textContainer.css('background', color);
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table border="1" cellpadding="0">
  <tr>
    <td>
      <div class="paragraph">This is the first paragraph</div>
    </td>
    <td>
      <select name="select1" id="select1">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option selected="selected" value="black">black</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <div class="paragraph">This is the second paragraph </div>
    </td>
    <td>
      <select name="select2" id="select2">
        <option value="red">red</option>
        <option selected="selected" value="blue">blue</option>
        <option value="green">green</option>
        <option value="black">black</option>
      </select>
    </td>
  </tr>
</table>

我稍微重构了你的代码：

您可以收听任何 select 变化（不需要分别收听每个 select）。
您可以使用 .closest 找到段落元素。
Trigger change 事件使代码在页面加载时设置颜色。

关于将其发送到后端，我不知道您（想要）使用哪个服务器，但一般来说，您有 2 个选择：form submission or ajax (with jQuery)。

他们都使用这些参数向服务器发送请求。将它们放入服务器后（也许 this 问题可以帮助你），你可以对它们做任何你想做的事，将它们保存到数据库或写入文件。

如有遗漏请告诉我。

交互式文本突出显示并提交到后端

Interactive Text highlighting and submission to a back end

css

jquery

text

backend