Question

我搜索了几十篇文章试图找到解决方案，但我对jQuery很新，似乎无法弄明白。基本上我有两个在页面加载时隐藏的元素。

<div id="correct" class="hidden">
    <h5> CORRECT! </h5>
</div>

<div id="wrong" class="hidden">
    <h5> NOPE! TRY AGAIN </h5>
</div>

我有一个输入框。当用户输入正确的答案并按下提交时，会显示#correct div。

function guessAnswer() {
  $("button.guess-submit").click(function(event) {

  if ( $('#guess-input').val() == answer) {
      $('#correct').show();
      $('#wrong').hide();
  } else {
     $('#wrong').show();
 }

我也使用LazyLine Painter进行svg绘图。当显示#correct div时，我想编辑其中一个LazyLine选项，以便提高绘图速度。以下是LazyLine的基本代码：

    var $logo = $('#sketch');

      $logo.lazylinepainter({
          'svgData': svgData,
          'strokeWidth': 1,
          'speedMultiplier': 3,
          'delay': 5,
          'strokeColor': '#b5287b',
              'drawSequential': true,
              'ease': 'easeInOutQuad'
      });

      setTimeout(function(){
          $logo.lazylinepainter('paint');
      }, 10)

current demo live on codepen

Answer 1

编辑：根据OP的更新，想要在点击按钮之前触发功能（警报），以下内容可能有所帮助：

＆＃13;

$('#guess-input').on('keyup', function() {
      var answer = 'answer';
      if ($(this).val() == answer) {
                    alert('hi');
        }
      });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id = "guess-input">

＆＃13;

这将在每次击键后检查答案变量，并在匹配时触发事件。

Answer 2

我认为你会在$（＆＃39;＃correct＆＃39;）。show（）之后把它放好，而且不需要检查$（＆＃39;＃correct＆＃39;）。css （＆＃39;显示＆＃39;）条件。您还可以查看delay（），以确保用户在警报弹出之前看到正确的div。

希望能回答你的问题吗？

Answer 3

将警报行代码移至$('#correct').show();以下，您就可以了。

var answer = document.getElementById('guess-input').name;

function guessAnswer() {
  $("button.guess-submit").click(function(event) {

    if ( $('#guess-input').val() == "answer") {
      $('#correct').show();
      alert('hi');
      $('#wrong').hide();
    } else {
      $('#wrong').show();
    }

  });

}

function enterSubmit() {
   $("#guess-input").keyup(function(event){
      if(event.keyCode == 13){
          $("#guess-submit").click();
      }
   });

  guessAnswer();
}

enterSubmit();

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="question-one">

  <!--SUPERHERO QUESTION + ANSWER-->
  <div class="question">

    <!--QUESTION FORM + BUTTON-->
      <input id="guess-input" type="text" name="quip"/>

    <button id="guess-submit" class="guess-submit">Submit</button>

  </div>

  <!-- ---MESSAGES--- -->
  <div id="messages">

    <div class="hidden" id="correct">
      <h5> CORRECT! </h5>
    </div>

    <div class="hidden" id="wrong">
      <h5> NOPE! TRY AGAIN </h5>
    </div>

  </div>

</section>

Answer 4

Below code is enough! you can replace this with your js script.


$( document ).ready(function() {
    $('#correct').hide();
    $('#wrong').hide();
    var answer = document.getElementById('guess-input').name;
  $("button.guess-submit").click(function(event) {
    if ( $('#guess-input').val() == answer) {
      $('#correct').show();
      $('#wrong').hide();
      alert("hi");
    } else {
      $('#wrong').show();
      $('#correct').hide();
    }

  });
});

如何检测div是否可见以触发另一个事件（LazyLine Painter）

4 个答案: