Question

我有这样的HTML：

<div id=1 class=header onclick="hideit(this.id)">Header1
<div class=content>Some content
</div>
</div>

我的代码中使用了很多这种结构我想要切换第二个div（内容）如果有人点击标题。

我写了这个函数，但它没有用，有人可以告诉我为什么吗？

<script language="javascript">
    function hideit(hID)
    {
      var searcher = "div[id="+hID+"] .content";
      $(searcher).slideToggle();
    }
</script>

Answer 1

由于您使用的是jQuery，因此实际上无需调用内联函数。您可以使用这个简单的事件处理程序完成您要执行的操作：

$(".header").click(function() {
    $(this).find(".content").slideToggle();
});

此外，元素ID不应以数字开头。

Answer 2

# is the selector for ids

所以在你的情况下

div#1 .content

Answer 3

理想情况下那些＆＃34;结构＆＃34;共享一个共同的父节点。如果有很多这样的话，那么使用事件委派是最好的做法。让我们假设<div>的{{1}}包含所有这些结构：

foo

这会将一个事件处理程序绑定到共享父节点。如果没有公共父节点，则需要为每个$('#foo').delegate('div.header', 'click', function( event ) { $(this).find('.content').slideToggle(); }); div元素绑定一个事件处理程序：

.header

Answer 4

function hideit(hID)  {
    $('#'+hID).find('.content).slideToggle();  
}

Answer 5

HTML：

<div id="1" class="header">Header1
    <div class="content">Some content
    </div>
</div>

jquery的：

$(".header").click(function() {
    $(".content", $(this)).slideToggle();
});

Answer 6

虽然您的id属性在HTML5中可以是数值，但我仍强烈建议不要使用数字来启动您的ID。也许是id-1，
我会这样做

<强>的jquery / javascripit

$(function(){ 
      ('div.header').click(function() {
         $('div.content', this).slideToggle(); });`
)};

<强> HTML

<div id='id-1' class='header'>Header1
  <div class='content'>Some content
  </div>
</div>

直播示例：http://jsfiddle.net/QSvYE/

如果您选择通过id＃选择路线，也许以下正则表达式会有所帮助

//set regex
var re = /(^\w+-)(\d+)$/i;

//get attr broken into parts
var str = $(this).attr('id').match(re)[1], 
    id  = $(this).attr('id').match(re)[2];

jQuery选择和slideToggle（）

6 个答案: