1

私のHTMLに基づいて、要素 #type および #type_new にアクセスするより良い方法があるかどうかを知りたいです:

<tr>
  <th>Type of Organization</th>
  <td id="toggle">
    <select name="type" id="type">
      <option>Church</option>
      <option>College</option>
      <option>Theatre</option>
    </select> 
    <input name="type_new" id="type_new" type="text" />                        
  </td>
</tr>
<tr>
  <th>&nbsp;</th>
  <td><a class="toggle" id="type"><small>Add New Type</small></a></td>
</tr>

これが私のJavaScriptです：

$("a.toggle").unbind('click').click(function(){
  $.prev = $(this).parents().parent().prev().find("td#toggle");
  $.select = $.prev.find("#type");
  $.textbox = $.prev.find("#type_new");

  if($.textbox.is(':visible')==true)
    $(this).find("small").html("Add New Type");
  else
    $(this).find("small").html("Choose From Exisiting Types");
  $.select.toggle();
  $.textbox.toggle().val("");
});

javascriptを簡単にするためにhtmlをレイアウトする方法が他にもあることは知っていますが、誰かが私の現在のhtmlに基づいた良い方法を持っていることは確かです。

ID や CLASS で参照しているだけではない理由は、ajax .load を使用してオンザフライでこれらをさらに生成しており、すべての要素が同じ ID とクラスを持つためです。あなたが尋ねるかもしれないインデックスを使用しないのはなぜですか? さて、私はそこに行ってそれをしました。実際には、クリック イベントを再バインドしてすべての新しい要素を含めるには、より多くのコードを使用する必要があります。ここでは、可能な限り簡単な方法を使用します。

ありがとう！

更新: ajax .load を使用してページのさらに下に同一の要素を追加しているという事実を強調したいと思います。$_POST の理由で要素名が異なりますが、JavaScript 関数ですべてのインスタンスを表示時に処理する必要があります。ID だけで参照すると、ページのすべての要素が更新されます。

4

1 に答える 1

4

ID は一意である必要があります。マークアップがそうであれば、それらを直接選択できるため、複雑なトラバースは必要ありません。そのため、コードの最初の 3 行を省略できます。代わりに、次のようにします。

$.prev = $("td#toggle");
$.select = $("#type");
$.textbox = $("#type_new");

または、クリック ハンドラーのコンテンツ全体を次のように置き換えることができます。

if($("#type_new").is(':visible')) {
    $(this).find("small")
           .html("Add New Type"); 
} else  {
    $(this).find("small").html("Choose From Exisiting Types");
    $("#type").toggle();
    $("#type_new").toggle().val("");
}
于 2009-10-17T01:01:15.323 に答える