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("");
});

我知道还有其他方法可以布置 html 以使 javascript 更容易，但肯定有人有基于我当前 html 的好方法。

可能值得注意的是，我不只是通过 ID 或 CLASS 引用的原因是我还在使用 ajax .load 动态生成更多这些元素，并且所有元素都将具有相同的 id 和类。为什么不使用您可能会问的索引？好吧，我去过那里并做到了。我实际上必须使用更多代码来重新绑定单击事件以包含所有新元素。我要在这里尽可能最简单的方法。

谢谢！

更新：我想强调一个事实，即我正在使用 ajax .load 在页面下方添加相同的元素。由于 $_POST 的原因，它们会有不同的元素名称，但我希望我的 javascript 函数在它们出现时处理每个实例。如果我仅按 ID 引用，它将一直更新页面下方的所有元素。

4

1 回答 1

4

ID 应该是唯一的。如果你的标记是这样，那么就不需要复杂的遍历，因为你可以直接选择它们，所以你的前三行代码可以省略，或者简单地是：

$.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 回答