0

我创建了一个按技能组织的简历网页。

在页面顶部，导航中有三个按钮：

<p>Choose the type of experience you are interested in seeing:</p>
<button class="button-w" type="button">Writing/Editing Experience</button>
<button class="button-t" type="button">Teaching/Training Experience</button>
<button class="button-c" type="button">Current Experience</button>

我为 html 文档中的每个相应部分赋予了自己的类。例如：包含我所有的写作/编辑经验。

然后我写了 jquery 来删除/分离除写作/编辑之外的所有其他部分。见下文。它适用于我单击的第一个按钮。但问题是，当我点击“教学/培训体验”按钮时，因为当我点击“写作/编辑体验”按钮时我已经删除了该内容，我什么也得不到。

这是我所拥有的：

$(document).ready(function(){

$(".button-w").click(function(){
    $("section, div").detach(".teaching, .current");

});

$(".button-t").click(function(){
   $("section, div").detach(".writing, .current");
});

$(".button-c").click(function(){
    $("section, div").detach(".writing, .teaching");
});
});

我认为我需要的是：--使用“show”/“hide”并添加某种条件语句，以便如果一个显示其他内容，则隐藏每个按钮选择或--对 jquery 进行排序，以便当我单击每个新按钮时，它首先恢复我的原始内容，然后删除除选定部分之外的所有部分。

你能帮我吗？

4

2 回答 2

0

.detach()从DOM中删除匹配的元素集。

我觉得那不是你真正想做的。只是.hide()和.show()一些元素就足够了。

$(document).ready(function(){

  $(".button-w").click(function(){
    $(".teaching, .current").hide();
    $(".writing").show();
  });

  $(".button-t").click(function(){
   $(".writing, .current").hide();
   $(".teaching").show();
  });

  $(".button-c").click(function(){
    $(".writing, .teaching").hide();
    $(".current").show();
  });
});
section div{
  display:none;
  margin-top:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Choose the type of experience you are interested in seeing:</p>
<button class="button-w" type="button">Writing/Editing Experience</button>
<button class="button-t" type="button">Teaching/Training Experience</button>
<button class="button-c" type="button">Current Experience</button>

<section>
  <div class="writing">Writing/Editing Experience</div>
</section>

<section>
  <div class="teaching">Teaching/Training Experience</div>
</section>

<section>
  <div class="current">Current Experience</div>
</section>

现在有了上面的内容，您必须为每个按钮编写一个处理程序......每次您希望添加一个部分时，您都必须“复制”处理程序。

您可以通过对每个按钮使用.data()和数据属性来缩短它。

$(document).ready(function(){

  $(".btn-section").click(function(){
    $("section div").hide();
    var section = $(this).data("section");
    $("."+section).show();
  });
  
});
section div{
  display:none;
  margin-top:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Choose the type of experience you are interested in seeing:</p>
<button class="btn-section" type="button" data-section="writing">Writing/Editing Experience</button>
<button class="btn-section" type="button" data-section="teaching">Teaching/Training Experience</button>
<button class="btn-section" type="button" data-section="current">Current Experience</button>

<section>
  <div class="writing">Writing/Editing Experience</div>
</section>

<section>
  <div class="teaching">Teaching/Training Experience</div>
</section>

<section>
  <div class="current">Current Experience</div>
</section>

于 2018-07-29T01:20:25.700 回答
0

我在这里回答我自己的问题，因为我意识到我真正想要解决我的需求是创建一个过滤器。因此，我通过标记要过滤掉的每个 HTML 元素来创建句柄：

<section class="filter writing">
<section class="filter teaching">
<section class="filter current">

我制作了导航菜单：

<nav>
<div class="container">
<h5>What experience would  you like to see?</h5>
    <ul>
        <li class="button active" data-filter="all">All</li>
        <li class="button" data-filter="writing">Writing/Editing Experience</li>
        <li class="button" data-filter="teaching">Teaching/Training Experience</li>
        <li class="button" data-filter="current">Current Experience</li>
        <div style="clear: both;"></div>
    </ul>
</div>
</nav>

然后我将下面的 jquery（我从这个视频中学到的：https ://www.youtube.com/watch?v=pPyT6zyPz7g ）应用到 HTML 句柄并使用菜单按钮：

$(document).ready(function(){
$(".button").click(function(){
    var value = $(this).attr("data-filter");
    if (value == "all")
    {
        $(".filter").show("1000");
    }
    else
    {
        $(".filter").not("."+value).hide("1000");
        $(".filter").filter("."+value).show("1000");
    }
    //add active class
    $("ul .button").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    })
})
})

在这里省略 CSS，将悬停添加到菜单等，这完成了我想要的。

于 2018-07-30T18:05:08.153 回答