Question

我有这个长胖代码，每个新项目都会变胖。

$(function () {
  $("#list1").click(function () {
    $(".drop").hide();
    $('#down1').css('display','flex');
  });
  $("#list2").click(function () {
    $(".drop").hide();
    $('#down2').css('display','flex');
  });
  $("#list3").click(function () {
    $(".drop").hide();
    $('#down3').css('display','flex');
  });
  $("#list4").click(function () {
    $(".drop").hide();
    $('#down4').css('display','flex');
  });
  $("#list5").click(function () {
    $(".drop").hide();
    $('#down5').css('display','flex');
  });
  $("#list6").click(function () {
    $(".drop").hide();
    $('#down6').css('display','flex');
  });
});

为了做一些小事，我试着这样做：

$(function() {
  var list = document.querySelectorAll("#list");
  var down = document.querySelectorAll("#down");
  var i;
  for (i = 0; i < list.length; i++) {
    $("#list[i]").click(function() {
      $(".drop").hide();
      $('#down[i]').css('display', 'flex');
    });
    $("#dowm[i]").click(function() {
      $(".drop").hide();
    });
  };
});

drop class被分配给每个“down”，因此它隐藏了当时“show”中所有不同的“down”。

EDIT2：

这样做效果好一点，但不是我看的答案：

$("#list1").click(function(){
$('.listc').not('#down1').removeClass("drop").addClass("hide");
$('#down1').toggleClass("hide drop");
});
$("#list2").click(function(){
$('.listc').not('#down2').removeClass("drop").addClass("hide");
$('#down2').toggleClass("hide drop");
});
$("#list3").click(function(){
$('.listc').not('#down3').removeClass("drop").addClass("hide");
$('#down3').toggleClass("hide drop");
});
$("#list4").click(function(){
$('.listc').not('#down4').removeClass("drop").addClass("hide");
$('#down4').toggleClass("hide drop");
});
$("#list5").click(function(){
$('.listc').not('#down5').removeClass("drop").addClass("hide");
$('#down5').toggleClass("hide drop");
});
$("#list6").click(function(){
$('.listc').not('#down6').removeClass("drop").addClass("hide");
$('#down6').toggleClass("hide drop");
});

这是HTML代码：

<ul class="menu " id="navigation">
    <a class="home" id="home">Home</a>
    <a class="homicon" id="homicon">&#8962;</a>
 <li>  <a id="list1" class="list" data-drop="drop1">Basics</a>
  <div class="hide listc" id="down1">
    <a id="energies">Energies</a>
    <a id="tools">Tools</a>
    <a id="trigrams">Trigrams</a>
    <a id="recommendations">Recommendations</a>
    <a id="sources">Sources</a>
  </div>
 </li>
 <li>  <a id="list2" class="list" data-drop="drop2">Chakras</a>
  <div class="hide listc" id="down2">
    <a id="chakras_intro">Introduction</a>
    <a id="root">Root</a>
    <a id="sacral">Sacral</a>
    <a id="solar">Solar</a>
    <a id="heart">Heart</a>
    <a id="throat">Throat</a>
    <a id="third_eye">Third Eye</a>
    <a id="jade">Jade</a>
    <a id="crown">Crown</a>
  </div>
  </li>
  <li>  <a id="list3" class="list" data-drop="drop3">Elements</a>
  <div class="hide listc" id="down3">
    <a id="elements_intro">Introduction</a>
    <a id="earth">Earth</a>
    <a id="fire">Fire</a>
    <a id="spirit">Spirit</a>
    <a id="water">Water</a>
    <a id="wind">Wind</a>
  </div>
 </li>
 <li>  <a id="list4" class="list" data-drop="drop4">Kuji-in</a>
  <div class="hide listc" id="down4">
    <a id="kuji_intro">Introduction</a>
    <a id="rin">Strength</a>
    <a id="pyo">Responsibility</a>
    <a id="to">Harmony</a>
    <a id="sha">Healing</a>
    <a id="kai">Love</a>
    <a id="jin">Listening</a>
    <a id="retsu">Perception</a>
    <a id="zai">Consciousness</a>
    <a id="zen">Enlightenment</a>
    <a id="self-initiation">Self-initiation</a>
  </div>
</li>
<li>  <a id="list5" class="list" data-drop="drop5">Meditation</a>
  <div class="hide listc" id="down5">
    <a id="posture">Posture</a>
    <a id="breathing">breathing</a>
    <a id="types">Types</a>
    <a id="energy_storage">Energy Storage</a>
    <a id="empowering">Empowering</a>
    <a id="transmutation">Transmutation</a>
    <a id="harmonizing ">Heaven and Earth</a>
  </div>
</li>
<li>  <a id="list6" class="list" data-drop="drop6">Others</a>
  <div class="hide listc" id="down6">
    <a id="assimilation">Assimilation</a>
    <a id="compassion">Compassion</a>
    <a id="eyesight">Eyesight</a>
    <a id="gate">Gate</a>
    <a id="knowledge">Knowledge</a>
    <a id="regeneration">Regeneration</a>
    <a id="peace">Peace</a>
    <a id="solfeggio">Solfeggio</a>
  </div>
</li>

Answer 1

提供一个公共课程，对所有人说list并执行此操作：

$(".list").click(function(){
  $(".drop").hide();
  $('#down' + this.id.substr(-1)).css('display','flex');
});

这是最荒谬的做法。但正确的方法是使用data-*属性并链接向下和列表。

更改您的电流：

<div id="list1">

要：

<div id="list1" class="list">

以及data-*属性：

<div id="list1" class="list" data-drop="drop1">

在这样的JavaScript中使用：

$(".list").click(function(){
  $(".drop").hide();
  $("#" + $(this).data("drop")).css('display','flex');
});

另外，您是否重复了id个值？

var list = document.querySelectorAll("#list");

以上技术上应该只提供一个具有唯一ID的单个元素。为HTML中的多个元素赋予相同的id是犯罪行为。

如何简化：list1 show drop1，list2 show drop2，list3 show drop3等

1 个答案: