Question

我正在尝试按class选择一个元素，当点击它时，父素会被切换。

HTML：

`

great-grandparent <div class='section' id='section-18'>
   grandparent       <div class='docs'>
          parent        <div class='octowrap'>
                *          <a class='octothorpe' href='#section-18'>#</a>

`

$('octothorpe').closest('div.section').click(function() {
                    $(".fold").toggle(500);
                      console.log('fold', $('.fold').length);

                });
});

console.log("closest", $('.octothorpe').closest('div.section').length);

`

<style>
.fold {
    display: None;
}
</style>

`

q1回答＆lt;＆lt; 两者都不起作用，那么如何测试是否正在选择类元素？我可以输出标准的控制台日志消息吗？（我试着看看firefox检查员，但无法判断它是否被选中。我如何测试这种直截了当的方式？（即没有改变颜色等等......只是在日志中？））＆gt;＆gt;

我链接功能是否正确点击和切换？只有孩子可以点击，（octothorpe是一个href），但父.section是需要切换的？

代码如下：

的console.log。（对于父母的测试）最接近= 1，永远不变（对于折叠测试）每次单击时折叠增量。但即使使用preventDefault（），toggleClass也没有效果。样式display:None在这种情况下不起作用吗？

`

$(function() {
  $(".octothorpe").click(function(e) {
                             e.preventDefault();
                             var sector = $(this).closest("div.section");
                             sector.toggleClass(".fold");
                             //sector.(".fold").toggle();
                             console.log('fold', $('.fold').length);
                         });
  });

console.log("closest", $('.octothorpe').closest('div.section').length);

嗨，谢谢大家到目前为止。经过一番摆弄，我认为我不能只选择曾祖父母，而是选择父母兄弟和祖父母兄弟。如果我只选择曾祖父母的类，那么元素本身就会丢失，因为我无法将它带回来！

因此，我尝试了下面更具选择性的代码。但是，如下所示，隐藏或下滑/下移似乎都没有。 console.log输出显示折叠类递增，因此正在选择元素。

这段代码有什么问题？

`

$(function(){
  $('.octothorpe').on({
                          click:function(e){
                              e.preventDefault();
                              var pfold =$(this).closest('.octowrap').siblings('p');
                              var cfold =$(this).closest('docs').siblings('.code');
                              $pfold=$(pfold); $cfold=$(cfold);
                              //$pfold.hide();
                              //$cfold.hide();

                              if (!$pfold.hasClass("fold") && !$cfold.hasClass("fold")) {
                                  $cfold.slideUp().addClass('fold');
                                  $pfold.slideUp().addClass('fold');
                                  console.log('fold', $('.fold').length);
                              }
                              else {

                                  cfold.slideDown().removeClass('fold');
                                  pfold.slideDown().removeClass('fold');
                              }    
                          }
                      });

}）;

`

Answer 1

console.log($('.section').length);

将告诉您正在选择多少元素。如果您想知道.fold选择器是否正常，请放置

console.log($('.fold').length);

点击功能中的

。

Answer 2

您可以使用.parent（）方法。

所以考虑一下：

<div class="parent">
  <a href="#" class="child">click me</a>
</div>

js将是：

$(function(){
  $('.child').on({
    click:function(e){
      e.preventDefault();
      //stop it from refreshing the page

      $(this).parent().toggle();
      //$(this) is the what you clicked on - <a class="child">
      //.parent() is the <div class="parent">
      //.toggle() show/hide the .parent()
    }
  });
});

现在这段代码有点蠢。由于您隐藏了父级，这意味着您将自动隐藏该子级。所以.toggle（）是愚蠢的。一个更好的方法是：

$(function(){
  $('.child').on({
    click:function(e){
      e.preventDefault();
      //stop it from refreshing the page

      $(this).parent().hide();
      //$(this) is the what you clicked on - <a class="child">
      //.parent() is the <div class="parent">
      //.hide() hide the .parent()
    }
  });
});

Answer 3

假设你有一个容器上的Sections和另一个容器上的锚点（如果你打算像索引/内容列表那样使用它们，那么我会这样做：

$(".octothorpe").click(function(e) {
    e.preventDefault();
    var sectorhash = $(this).attr("href");
    $sector = $(sectorhash);
    if (!$sector.hasClass("fold")) {
        $sector.slideUp().addClass("fold");
    }
    else {
        $sector.slideDown().removeClass("fold"); 
    }
});

jquery按类选择子项，在子项上单击切换父项类

3 个答案: