jQuery滑块有效，但它是硬代码，如何使其动态

Question

我有一个列表，其中包含一些列表项[“ web”，“ crossplatform”等]

我有一些具有相同类的div。

示例：

 <div class="web"></div>

我所做的是，如果单击列表中的“ web”，则不显示带有“ web”类的div，并隐藏所有其他div，但不隐藏列表。

我已经做到了，它可以工作，但是全都是硬编码，我希望它变得更加动态。

这是我的代码的链接：Link

html：

<div class="container">
    <ul class="list">
      <li class="list__item active">web</li>
      <li class="list__item">crossplatform</li>
      <li class="list__item">wearables</li>
      <li class="list__item">tv</li>
      <li class="list__item">tablet</li>
    </ul>
    <div class="slider">
        <div class="web">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptatum alias exercitationem soluta, voluptatem, quod ratione dicta sequi quibusdam quam itaque veritatis similique, aspernatur id possimus quae suscipit animi aperiam?</p>
        </div>

        <div class="crossplatform">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>

        <div class="wearables">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>

      <div class="tv">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>
      <div class="tablet">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>
</div>
</div>

css：

*{
    margin: 0;
    padding: 0;
  }
  .container{
    display: flex;
    justify-content: center;
  }
  .slider{
      position: absolute;
      top: 100px;
      width: 600px;
  }
  .list{
    top: 40px;
    position: relative;
    display: inline-flex;
    list-style: none;
    width: 400px;
  /*   background-color: #cacaca; */
    justify-content: space-between;
  }
  .list__item{
    position: relative;
    padding: 10px;
    cursor: pointer;
  }

  .list__item::before{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #00a4ff;
    transform: scale(0);
    transition: transform .35s;
  }

  .active.list__item::before{
    transform: scale(1);
  }
  .web{
      color: red;
  }

  .crossplatform{
      color: #0F5738;
  }

  .wearables{
      color: green;
  }
.tv{
  color: #68113F;
}
.tablet{
  color: #042037;
}
  .crossplatform,
  .wearables,
  .tablet,
  .tv{
    display: none;
  }

jquery：

  $(".list__item").click(function(){
        var link = $(this).text();  
        var activeList = $('li').hasClass("active");

      $(this).addClass('active');
      $(this).siblings('.list__item').removeClass('active');

        if(link === "web" && activeList){
          $(".web").delay(400).fadeIn('slow');
          $(".wearables").hide();
          $(".crossplatform").hide();
          $(".tv").hide();
          $(".web").hide();
          $(".tablet").hide();

        }else if(link === "crossplatform" && activeList){
          $(".crossplatform").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".wearables").hide();
          $(".tv").hide();
          $(".web").hide();
          $(".tablet").hide();

        }else if(link === "wearables" && activeList){
          $(".wearables").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".crossplatform").hide();
          $(".tv").hide();
          $(".web").hide();
          $(".tablet").hide();

        }else if(link === "tv" && activeList){
          $(".tv").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".crossplatform").hide();
          $(".wearables").hide();
          $(".tablet").hide();

        } else if(link === "tablet" && activeList){
          $(".tablet").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".crossplatform").hide();
          $(".wearables").hide();
          $(".tv").hide();
        }
      })

Answer 1

您可以隐藏滑块的所有子项，然后通过使用类选择器中的link变量来显示一个子项。

但是，因为您可能不希望它依赖于按钮的文本，所以我在li项中添加了data-content属性，以便可以在此处设置正确的选择器。这样，您可以在不破坏代码的情况下更改按钮文本。

$(".list__item").click(function() {
  //retrieve the content data attribute instead of the button text so you can change the text without breaking code.
  var contentSelector = $(this).data('content');
  var activeList = $('li').hasClass("active");

  $(this).addClass('active');
  $(this).siblings('.list__item').removeClass('active');

  //Hide all children and then display the one belonging to the clicked button.
  $('.slider').children().hide();
  $(contentSelector).delay(400).fadeIn('slow');
})

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
}

.slider {
  position: absolute;
  top: 100px;
  width: 600px;
}

.list {
  top: 40px;
  position: relative;
  display: inline-flex;
  list-style: none;
  width: 400px;
  /*   background-color: #cacaca; */
  justify-content: space-between;
}

.list__item {
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.list__item::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #00a4ff;
  transform: scale(0);
  transition: transform .35s;
}

.active.list__item::before {
  transform: scale(1);
}

.web {
  color: red;
}

.crossplatform {
  color: #0F5738;
}

.wearables {
  color: green;
}

.tv {
  color: #68113F;
}

.tablet {
  color: #042037;
}

.crossplatform,
.wearables,
.tablet,
.tv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="list">
    <!-- Added data-content attribute to use as a content selector -->
    <li class="list__item active" data-content=".web">web</li>
    <li class="list__item" data-content=".crossplatform">crossplatform</li>
    <li class="list__item" data-content=".wearables">wearables</li>
    <li class="list__item" data-content=".tv">tv</li>
    <li class="list__item" data-content=".tablet">tablet</li>
  </ul>

  <div class="slider">
    <div class="web">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptatum alias exercitationem soluta, voluptatem, quod ratione dicta sequi quibusdam quam itaque veritatis similique, aspernatur id possimus quae suscipit animi aperiam?</p>
    </div>

    <div class="crossplatform">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>

    <div class="wearables">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>

    <div class="tv">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>
    <div class="tablet">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>
  </div>
</div>

Answer 2

您可以这样做

const available_class_names = [
  'tablet',
  'web',
  'crossplatform',
  'wearables',
  'tv'
];

function showOnly(show_class_name) {
  available_class_names.forEach(function(class_name) {
    var elem = $('.' + class_name);

    if (!elem.length) {
      console.log('element does not exist');
      return;
    }

    if (class_name === show_class_name) {
      elem.delay(400).fadeIn('slow');
    } else {
      elem.hide();
    }
  });
}

然后您将调用showOnly(link)而不是通过所有if / else逻辑。

仅供参考：我首先定义可用的类名，并且不使用link变量动态地进行设置，因为这是“更安全”的。想象一下link变量可以包含用户有影响的内容，那么他​​可能正在触摸您不希望他触摸的元素。