Question

我想知道是否有人根据我的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和类。为什么不使用您可能会问的索引？好吧，我去过那里并做到了。我必须实际使用更多代码来重新绑定click事件以包含所有新元素。我在这里以最简单的方式前进。

谢谢！

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

Answer 1

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

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

jquery遍历 - 必须有比我更好的方法！

1 个答案: