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

Question

我正在寻找创建一个网页荧光笔，它会在屏幕上显示几个段落，然后允许人们通过突出显示文本的一部分然后单击按钮来用绿色突出显示好的行和用红色突出显示不好的行（或键入一个数字，就像在雷鸟中一样）。然后，我希望能够基本上将此文本提交给某种后台引擎。

我已经设法构建了一些 jsfiddle 代码，但无法打开文本的颜色更改，并且不知道如何让文本提交到后端例程。

这个 sn-p 并没有完全发挥作用，但它是朝着正确方向迈出的一步......

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>

我稍微重构了你的代码：

1. 您可以收听任何select 的变化（无需分别收听每个select）。
2. 您可以使用.closest 查找段落元素。
3. Triggerchange 事件使代码在页面加载时设置颜色。

关于将其发送到后端，我不知道您（想要）使用哪个服务器，但通常，您有 2 个选项：form submission 或 ajax (with jQuery)。

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

如果有什么遗漏请告诉我。