0

ユーザーが好む色でセルを強調表示しようとしています。ユーザーはセルを選択し、マウスをドラッグして、選択した色で色付けする複数のセルを選択します。ユーザーがインラインイベントハンドラーを使用せずにマウスをクリックしてドラッグしたときに、別のファイルにあるjavascript関数をトリガーするにはどうすればよいですか（ファイルをhtmlファイルに含める必要があることはわかっています。すでに行っています）。

コードはドラッグアンドセレクトするためのものですが、ユーザーがセルをクリックアンドドラッグしたときにこの関数を呼び出したいと思います。google.setOnLoadCallBackを使用してこの関数を呼び出す前は、1回しか呼び出されませんでした。ユーザーに複数の選択肢を持たせたい。私は理にかなっていると思います。

HTML

<section id="importance">
   <label class="green">Green</label>
   <input type="radio" name="importance" value="green">

   <label class="yellow">Yellow</label>
   <input type="radio" name="importance" value="yellow">

   <label class="orange">Orange</label>
   <input type="radio" name="importance" value="orange">

   <label class="red">Red</label>
   <input type="radio" name="importance" value="red">
</section>

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>

Javascript

function select_multiple() {
  var isMouseDown = false;
  // id for all the cells that were selected at the same time
  var colorGroupId = Math.floor(Math.random() * 1000);
  var highlight = find_importance_color();
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass(highlight);
      $(this).attr("data-highlightedId", colorGroupId);
      return false; // prevent text selection
  })
  .mouseover(function () {
    if (isMouseDown) {
      $(this).addClass(highlight);
    }
  });

  $("#our_table td")
    .mouseup(function (event) {
    isMouseDown = false;
    // time_importance(event);
  });
}

function find_importance_color() {
    return $('#importance input[name=importance]:checked').val();
}

CSS

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.red {
  background-color: red;
}

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}
4

2 に答える 2

3

初期化関数をjQueryreadyハンドラーに渡します。

$(document).ready(select_multiple);

jQueryは、ドキュメントがロードされたときにそれを呼び出します。

于 2013-01-24T01:55:13.093 に答える
0

最も基本的な変更で、あなたが探しているのは私がここで行ったことだと思います。

http://jsfiddle.net/trakkasure/CtRYd/

// On ready function.
$(function(){
      var isMouseDown = false;
  // id for all the cells that were selected at the same time
  var colorGroupId = Math.floor(Math.random() * 1000);
  var remove = false;
  $("#our_table td")
    .mousedown(function () {
      var highlight = find_importance_color();
      isMouseDown = true;

      remove = $(this).hasClass(highlight);
      if (remove)
        $(this).removeClass(highlight);
      else $(this).addClass(highlight);
      $(this).data("highlightedId", colorGroupId);
      return false; // prevent text selection
  })
  .mouseover(function () {
    if (isMouseDown) {
      var highlight = find_importance_color();
      if (remove)
        $(this).removeClass(highlight);
      else $(this).addClass(highlight);
    }
  });

  $(document.body)
    .mouseup(function (event) {
    isMouseDown = false;
    // time_importance(event);
  });

  function find_importance_color() {
    return $('#importance input[name=importance]:checked').val();
  }
})

select multiplesの外部関数呼び出しを削除し、選択した色が設定されているかどうかに基づいて色の切り替えを調整しました。

イベントを作成する必要があるのは1回だけなので、これはjqueryドキュメントレディハンドラーに入れる必要があります。

また、マウスがテーブルの外に出された場合、マウスアップイベントは発生しませんでした。したがって、ドキュメント本文でイベントをリッスンすると、それが解決されます。

于 2013-01-24T02:08:18.427 に答える