Question

我对jQuery非常陌生，我一直想尝试的一件事是创建一次显示不同部分的按钮。我刚学过toggleClass函数，目前这就是我所拥有的。我想解决3件事以获得期望的结果。我非常感谢您提供的提示和帮助。以下是问题所在。

我想从显示该部分中的列表开始，让用户可以选择在想要查看的任何一个之间切换。这是否意味着我必须应用 display：“ none” 并可能将其命名为 inactive 类并尝试使用它？
每次我再次单击同一按钮时，它都会返回到原始状态，即“显示：无” 。有没有办法仅在第二次按下切换效果时才停止切换效果？
如果我尝试使用前三个按钮并尝试通过按AllButton来全部显示，则由于某种原因，它不会显示SEO部分。我认为这与我的编码方式有关系...

如果我写下的内容进一步使您感到困惑，您能帮我找到一个参考或链接来教您如何正确进行此操作吗？我似乎找不到任何地方，包括YouTube和CodePen。我还将留下一个投资组合链接，其中包含我要实现的目标的示例。感谢您的阅读！ https://evelyncranston.ca/

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").toggleClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").toggleClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").toggleClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").toggleClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

尝试一下：

https://jsfiddle.net/ewu019hj/

它将您的hide / logic封装到一个按钮处理程序可以调用的函数中。

const bodyParser = require('body-parser');
const express = require('express');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
const app = express();
app.use(bodyParser.json({limit: '50mb', extended: true}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

app.post('/data', async (req, res) => {
    console.log(req.body.userArray);
});

这也使您可以选择指定默认值。

Answer 2

当我们两次单击按钮时，请使用toggleClass来代替addClass来隐藏该部分。

更短版本：

https://jsfiddle.net/ewu019hj/1/

var buttons = $(".buttons button");

buttons.on('click', function(e) {
  var idx = buttons.index(e.target)
  if (idx === 3) { //All button
    $("#points-of-sale ul li").addClass("active");
  } else {
    $("#points-of-sale ul li").removeClass("active");
    $("#points-of-sale ul li:eq(" + idx + ")").addClass("active");
  }
});

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

var buttons = $('.buttons button');



WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").addClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").addClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").addClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").addClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 3

这是一个简单的逻辑，请参见此处的代码

$(document).ready(function(){
  $(document).on('click','.buttons button', function(){

    if($(this).hasClass('current')){ return 0; }
    //when click current active item then not take any action

    //else 
    if($(this).hasClass('all')) { //when click the all button then the show all item here

      $(this).addClass('current').siblings('button').removeClass('current');
      $(document).find('#points-of-sale ul li').fadeIn(300);      

    }else { //normally work this section when not all button click

      $(this).addClass('current').siblings('button').removeClass('current');
      $(document).find('#points-of-sale ul li').fadeOut(0).eq($('.buttons button').index(this)).fadeIn(300);
    }
  });
})

$(window).on('load',function(){

  //set the first item active
  $(document).find('#points-of-sale ul li').eq(0).fadeIn(500); // show the first item 
  $(document).find('.buttons button').eq(0).addClass('current'); // active the first button 
  
})

#points-of-sale ul li {
   display:none;
}
button.current { color: gray; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button class="all">All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

我只是在最后一个按钮中设置了一个类“当前” ，点击用户即可显示所有项目。

说明：“窗口加载事件” 选择第一个按钮并设置“当前” 类，并显示列表第一项并带有简单的动画

当用户单击活动项目时，我们不需要任何操作
当点击所有项目显示按钮，然后显示所有项目并添加按钮类别'当前'，并删除其他按钮类别'当前'
否则，单击按钮添加类“当前” ，兄弟姐妹按钮删除类“当前” 并获取按钮索引并在此处显示内容。

谢谢

Answer 4

使用此代码：

var WebButton = $(".buttons button:nth-child(1)");
var EButton = $(".buttons button:nth-child(2)");
var SEOButton = $(".buttons button:nth-child(3)");
var AllButton = $(".buttons button:nth-child(4)");

WebButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(1)").addClass("active");
}

EButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").addClass("active");
}

SEOButton[0].onclick = function(){
  $("#points-of-sale ul li:nth-child(1)").removeClass("active");
  $("#points-of-sale ul li:nth-child(2)").removeClass("active");
  $("#points-of-sale ul li:nth-child(3)").addClass("active");
}

AllButton[0].onclick = function(){
  $("#points-of-sale ul li").addClass("active");
}

#points-of-sale ul li {
   display:none;
}

.active {
    display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons">
  <button>Web Design</button>
  <button>E-Commerce</button>
  <button>SEO</button>
  <button>All</button>
</div>

<section id="points-of-sale">
  <ul>
    <li>
        <h3>Web Design</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>E-commerce</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
    <li>
        <h3>SEO</h3>
        <p>quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem</p>
    </li>
  </ul>
</section>

jQuery toggleClass与显示不同的菜单有关

4 个答案: