1

私は Javascript を初めて使用しますが (しかし、今のところ気に入っています!)、かなり基本的な小さなプロジェクトに取り組んでいます。1 つのコンポーネントでは、文字を選択してからボタンをクリックし、強調表示されている文字だけで画面を更新する必要があります。Jquery を使用してハイライト機能を動作させましたが、更新コンポーネントについて疑問に思っています。これにアプローチする最良の方法は何ですか？

編集：もう少し詳細を提供する必要があると思います。この文字リストは非常に長くなる可能性があります。数百以上のようです。また、誰かが文字をクリックして強調表示した後、送信をクリックしたときに 2 つのことが発生する必要があります。1 つは、どの文字が強調表示されたかをデータベースに通知して集計を保持する必要があり (これが、各スパンに一意の ID をタグ付けした理由です)、2 つは、強調表示された文字だけをランダムな順序にシャッフルして画面を更新する必要があります。

したがって、私が探しているのは、これらの強調表示された文字を JSON 配列にキャプチャする方法だと思います。次に、情報をサーバーに転送して処理し、新しい (小さい) リストをシャッフルして画面をリロードします。このプロセスが繰り返される可能性があります。

それは設計上の決定を知らせるのに役立ちますか? 強調表示された文字をキャプチャするために Java スクリプトを使用する方法がわかりません。

<HTML>
  <HEAD>
    <script src="http://code.jquery.com/jquery-latest.min.js"
              type="text/javascript"></script>
    <style type="text/css">
      span.highlight {background-color: #FFFF00;}
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
      $("body").on("click",".letter", function () {
        var $this = $(this);
        $this.addClass("highlight");
        });
      });
    </script>    
    </HEAD>
  <BODY>
    <span class="letter" id="A">A</span>
    <span class="letter" id="B">B</span>
    <span class="letter" id="C">C</span>
    <span class="letter" id="D">D</span>
    <span class="letter" id="E">E</span>
    <span class="letter" id="F">F</span>
    <span class="letter" id="G">G</span>
    <span class="letter" id="H">H</span>
    <span class="letter" id="I">I</span>
    <span class="letter" id="J">J</span>
    <span class="letter" id="K">K</span>
    <span class="letter" id="L">L</span>
    <span class="letter" id="M">M</span>
    <span class="letter" id="N">N</span>
    <span class="letter" id="O">O</span>
    <span class="letter" id="P">P</span>
    <span class="letter" id="Q">Q</span>
    <span class="letter" id="R">R</span>
    <span class="letter" id="S">S</span>
    <span class="letter" id="T">T</span>
    <span class="letter" id="U">U</span>
    <span class="letter" id="V">V</span>
    <span class="letter" id="W">W</span>
    <span class="letter" id="X">X</span>
    <span class="letter" id="Y">Y</span>
    <span class="letter" id="Z">Z</span>

<input type="button" onclick="Reduce()" value="Remove Non Highlighted Chars">
  </BODY>
</HTML>
4

1 に答える 1

1

画面をリフレッシュしたいだけの場合：

$( "span.letter:not(.highlight)" ).fadeOut();

ページをリロードする必要がある場合は、表示される文字を URL のハッシュに入れることができます。ハッシュは後の部分で#、 で取得しますwindow.location.hash。このような URL のhttp://yoururl.com/letters/highlight#abc場合は、#abc. 更新は、事実上、異なるハッシュ パラメータを使用した同じ URL へのリダイレクトになります。

于 2013-09-07T21:26:10.187 に答える