Question

我试图在jquery中验证来自contenteditable的用户输入。我不确切地知道我弄错了哪里。请指教。

＆＃13;

$(function() {
  $("#p28-textid39").hide();
  $(".result").click(function() {
    $("#p28-textid39").show();
    var data_answer = $(this).attr("data-answer");
    var content = $(this).text();
    if (content == data_answer) {
      alert("correct");
    } else {
      alert("incorrect");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="bodyimage">
  <img alt="" src="images/page0028.jpg" />
</figure>
<div id="parent-p28">
  <p><span class="styleid2" id="p28-textid12">line is to write an ____________________.</span>
  </p>
  <p><span class="styleid9" id="p28-textid39">answer</span>
  </p>
  <div style="position:absolute;left:348px;top:278px;" class="act1">
    <table>
      <tr>
        <td class="txt" data-answer="answer" contenteditable="true"></td>
        <td><span class="show">&#160;</span>
        </td>
      </tr>
      <tr style="opacity:0;">
        <td>____________________</td>
        <td><span class="show">&#160;</span>
        </td>
      </tr>
    </table>
  </div>
  <div class="result" data-act="1" style="position:absolute;left:65px;top:173px;width:170px;height:125px;cursor:pointer;border:1px solid;">
  </div>
</div>

＆＃13;

Answer 1

错误使用＆＃39;此＆＃39;

的情况

＆＃13;

$(function() {
  $("#p28-textid39").hide();
  $(".result").click(function() {
    $("#p28-textid39").show();
    var data_answer = $(".txt").attr("data-answer");
    var content = $("#p28-textid39").text();
    if (content == data_answer) {
      alert("correct");
    } else {
      alert("incorrect");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="bodyimage">
  <img alt="" src="images/page0028.jpg" />
</figure>
<div id="parent-p28">
  <p><span class="styleid2" id="p28-textid12">line is to write an ____________________.</span>
  </p>
  <p><span class="styleid9" id="p28-textid39">answer</span>
  </p>
  <div style="position:absolute;left:348px;top:278px;" class="act1">
    <table>
      <tr>
        <td class="txt" data-answer="answer" contenteditable="true"></td>
        <td><span class="show">&#160;</span>
        </td>
      </tr>
      <tr style="opacity:0;">
        <td>____________________</td>
        <td><span class="show">&#160;</span>
        </td>
      </tr>
    </table>
  </div>
  <div class="result" data-act="1" style="position:absolute;left:65px;top:173px;width:170px;height:125px;cursor:pointer;border:1px solid;">
  </div>
</div>

＆＃13;

Answer 2

根据我的理解，用户将在<td class="txt" data-answer="answer" contenteditable="true"></td>中写下答案，其中包含与之比较的参考答案;你可以尝试下面的代码：

$(function() {
  $("#p28-textid39").hide();
  $(".result").click(function() {
    $("#p28-textid39").show();

    var sibAnwserDiv = $(this).prevAll(".act1").first(); //grab the wrapper Div in which <table> is present
    var targetTD = $(sibAnwserDiv).find("td.txt");

    var data_answer = targetTD.data("answer"); //get the reference answer
    var content = $.trim(data_answer.text()); //get the answer entered by user

    if (content == data_answer) {
      alert("correct");
    } else {
      alert("incorrect");
    }
  });
});

Answer 3

你的代码最像这样

$(function() {
    $("#p28-textid39").hide();
    $(".result").click(function() {
        $("#p28-textid39").show();
        var data_answer = $("#p28-textid39").attr("data-answer");
        var content = $(".txt").text();
        if (content == data_answer) {
            alert("correct");
        } else {
            alert("incorrect");
        }
    });
});

第6行和第7行最容易改变

如何使用jquery中的if条件检查动态值？

3 个答案: