当前位置: 首页 > 知识库问答 >
问题:

如果id有特定的类,使用js/jQuery Show()+Hide()排序?

穆阳炎
2023-03-14

我正在尝试制作一个代码,根据类名对div进行排序,并使用切换show()的按钮;如果类存在但hide();如果该类不存在。我没有得到任何错误,但代码不想按照我所说的方式工作?当您在我的预览中单击该按钮时,它会隐藏具有类名的id,而不对没有类名的id执行任何操作。

CSS

<html>
<head>
<title>Sorting</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
</head>

<body>
<div id="sort-box"><div id="button-wrap">
<button id="everyone" class="sort-button active">everyone</button>
<button id="lions" class="sort-button">lions</button>
<button id="tigers" class="sort-button">tigers</button>
<button id="bears" class="sort-button">bears</button>
<textarea id="search" class="sort-button" placeholder="search"></textarea></div>

<div class="sort-hold">
    <div id="member" class="lions all">member name - lion</div>
    <div id="member" class="tigers all">member name - tiger</div>
    <div id="member" class="bears all">member name - bear</div>
</div>
</div>
    <script type="text/javascript" src="assets/js/main.js"></script>
</body>

</html>

JS

var btnWrap = document.getElementById("button-wrap");

// Get all buttons with class="btn" inside the container
var btns = btnWrap.getElementsByClassName("sort-button");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}


$("#everyone").click(sortEveryone);
function sortEveryone() { 
    console.log("button clicked!")
    $("#member").show();
  };

  $("#lions").click(sortOne);
function sortOne() { 
    console.log("button clicked!")
    if($("#member").hasClass(".lions")){
        $("#member").show();
    } else {
        $("#member").hide();
    }
  };

共有2个答案

陈法
2023-03-14

这是我的解决方案。

将类everyone添加到everyone btn中,并将sort-hold member替换为类名而不是id

<div id="sort-box"><div id="button-wrap">
<button id="everyone" class="sort-button everyone active">everyone</button>
<button id="lions" class="sort-button">lions</button>
<button id="tigers" class="sort-button">tigers</button>
<button id="bears" class="sort-button">bears</button>
<textarea id="search" class="sort-button" placeholder="search"></textarea></div>

<div class="sort-hold">
    <div class="lions all member">member name - lion</div>
    <div class="tigers all member">member name - tiger</div>
    <div class="bears all member">member name - bear</div>
</div>
</div>


    <script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery.js"></script>
    <script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery_ui.js"></script>

将#member固定为.member

.member {
  margin: 10px;
  width: calc(100% - 70px);
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  text-transform: uppercase;
  font-family: arial;
  background: #fff;
  font-size: 10px;
  outline: 1px solid #ddd;
  outline-offset: -1px;
}
// Get the container element
var btnWrap = document.getElementById("button-wrap");

// Get all buttons with class="btn" inside the container
var btns = btnWrap.getElementsByClassName("sort-button");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}


$("#everyone").click(sortEveryone);
function sortEveryone() { 
    console.log("button clicked!")
    $(".member").show();
}

// add activeBtn function for all btns except .everyone
for (var btn of btns) {
    $(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : "";
}

function activeBtn(e) {
  let targetId = e.target.id;
  let members = $(".member");

  // if the member class has the same name as the btn id, show it else hide it
  for (var member of members) {
    $(member).hasClass(targetId) ? $(member).show() : $(member).hide();
  }
}

我已经将#member更改为.member,使用相同ID的多个元素不是一个好方法。

我还加了一句。每个人为每个人btn使它更容易处理。

裴育
2023-03-14

您可以使用一种更通用的方法来完成此操作,对所有按钮使用一次单击监听器,检查发生事件的按钮的id,并相应地做出反应

null

const $items = $('.sort-hold').children()

$('.sort-button').click(function(){
   // remove active class from other buttons
   $('.sort-button.active').removeClass('active');
   // make this button active
   $(this).addClass('active');
   // hide/show logic
   if(this.id === 'everyone'){
      $items.show()
   }else{
      $items.hide().filter('.' + this.id).show();   
   }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sort-box"><div id="button-wrap">
<button id="everyone" class="sort-button active">everyone</button>
<button id="lions" class="sort-button">lions</button>
<button id="tigers" class="sort-button">tigers</button>
<button id="bears" class="sort-button">bears</button>
</div>

<div class="sort-hold">
    <div  class="lions all">member name - lion</div>
    <div  class="tigers all">member name - tiger</div>
    <div  class="bears all">member name - bear</div>
</div>
</div>
 类似资料:
  • 问题内容: 是否可以使用预定义的一组列值(ID)按“ order by”在mysql中排序,例如:order by(ID = 1,5,4,3),因此我会在其中得到记录1、5、4、3订购吗? 更新: 关于滥用mysql ;-)我必须解释为什么我需要这个… 我希望记录每5分钟随机更改一次。我有一个cron任务来执行更新表,以在其中放置不同的随机排序顺序。只有一个问题!分页。我将有一位访问者来到我的页面

  • 本文向大家介绍jquery使用hide方法隐藏指定id的元素,包括了jquery使用hide方法隐藏指定id的元素的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery使用hide方法隐藏指定id的元素。分享给大家供大家参考。具体如下: 下面的代码通过jQuery的hide方法隐藏了id=test的元素 希望本文所述对大家的jQuery程序设计有所帮助。

  • 我试图删除特定id的帖子,但它给我错误为:代理错误:无法代理请求 /api/posts从localhost:3001http://localhost:8000。有关更多信息,请参阅https://nodejs.org/api/errors.html#errors_common_system_errors(ECONNREFUSED)。 这是我的行动: 这是我的减速机: 这是我的组件中使用的代码: 这

  • 在ArchUnit-Test中,是否有可能从分层测试条件中排除特定的类? 希望我能说清楚...

  • 我试图检索一个索引中的所有文档,但只得到_id字段。 基本上,我想检索我拥有的所有文档ID。 使用时: 我得到的命中包含:" _index "、" _type "、" _id "、" _score "、" _source ",这比我需要的要多得多。 编辑(回答):所以我的问题是我使用KOPF来运行查询,结果不准确(得到了_source等等…)!当使用curl时,我得到了正确的结果! 所以上面的查询

  • 问题内容: 我想从对象中删除特定对象。 我正在使用和。 根据文档,我们可以使用。 但这会删除所有。如何删除特定班级的? 问题答案: 当然,你可以,或将在通常的方式兴趣s,然后叫上这些div。 例如,如果要删除class的所有div ,则可以使用 如果你想删除一个div与特定的,比方说,你可以做到这一点