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

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>

我稍微重构了你的代码:

1. 您可以收听任何 select 更改(不需要分别收听每个 select)。
2. 您可以使用.closest 找到段落元素。 .
3. Trigger change 事件使代码在页面加载时设置颜色。

关于将它发送到后端，我不知道你(想要)使用哪个服务器，但一般来说，你有 2 个选项:form submission或 ajax (with jQuery) .

他们都向服务器发送带有这些参数的请求。将它们放入服务器后(也许 this 问题可以帮助您)，您可以随心所欲地处理它们，将它们保存到数据库中或写入文件中。

如果有遗漏请告诉我。