堆栈内存溢出
  简体   繁体   English

寻找一种更有效的方式编写此jquery菜单

[英]Looking for a more efficient way to write this jquery menu

 原文  2016-09-10 19:56:42  4   2    javascript/ jquery/ html/ css

问题描述

I'm pretty new to Jquery, so I've been going through some examples on w3schools.com, to get some ideas how to write better code. 我对Jquery还是很陌生，所以我一直在遍历w3schools.com上的一些示例，以获取一些如何编写更好的代码的想法。 Out of more curiosity than anything, I came up with this pretty simple menu, which has four divs, a main div called #main-slide which contains three links that points to three sub slides sub-slide-one , sub-slide-two , sub-slide-three . 出于好奇，我想出了一个非常简单的菜单，它具有四个div，一个名为#main-slide的主div包含三个指向三个子幻灯片sub-slide-one ， sub-slide-two ， sub-slide-three 。 By the way none of these actually slide in or out I just for whatever reason named them that way. 顺便说一句，无论出于什么原因，这些都没有实际滑入或滑出。

Here is the HTML: 这是HTML： 

<body>


  <div id="main-slide">

    <a class="Subone" href="#">SUB ONE</a>
    <a class="Subtwo" href="#">SUB TWO</a>
    <a class="Subthree" href="#">SUB THREE</a>

  </div>


  <div id="sub-slide-one">

    <h1>SUB ONE</h1>

    <a class="BackMain1" href="#">BACK TO MAIN</a>

  </div>

  <div id="sub-slide-two">

    <h1>SUB TWO</h1>

    <a class="BackMain2" href="#">BACK TO MAIN</a>

  </div>



  <div id="sub-slide-three">

    <h1>SUB THREE</h1>

    <a class="BackMain3" href="#">BACK TO MAIN</a>

  </div>

</body>

Here is the CSS: 这是CSS： 

body {
  background-color: antiquewhite;
}

h1 {
  text-align: center;
  padding-top: 30px;
}

a {
  text-decoration: none;
  color: #fff;
  font-family: arial;
  font-weight: bold;
  text-align: center;
  display: block;
  padding-top: 30px;
}

#sub-slide-one,
#sub-slide-two,
#sub-slide-three {
  display: none;
  width: 90%;
  height: 600px;
  position: relative;
  margin: 0 auto;
  margin-top: 30px;
}

#main-slide {
  width: 90%;
  height: 600px;
  position: relative;
  margin: 0 auto;
  margin-top: 30px;
  background-color: aliceblue;
  display: block;
}

#sub-slide-one {
  background-color: cadetblue;
}

#sub-slide-two {
  background-color: crimson;
}

#sub-slide-three {
  background-color: cornflowerblue;
}

.Subone,
.Subtwo,
.Subthree {
  width: 100%;
  height: 200px;
  display: block;
}

.Subone {
  background-color: dodgerblue;
}

.Subtwo {
  background-color: darkkhaki;
}

.Subthree {
  background-color: darkgoldenrod
}

For the JavaScript each link has a fadein/fadeout click function on it. 对于JavaScript，每个链接上都有一个淡入/淡出单击功能。 For example when Subone is clicked the #main-slide is faded out and sub-slide-one is faded in. Each sub slide contain a back link which links back to the main slide. 例如，当单击Subone时， #main-slide淡出， sub-slide-one淡入。每个子幻灯片都包含一个反向链接，该链接链接回到主幻灯片。 This is where I ultimately run into problems, the menu works as intended, although when I click the SubThree link it jumps to the top first for whatever reason. 这是我最终遇到问题的地方，菜单按预期工作，尽管当我单击SubThree链接时，无论出于何种原因，它都会跳至顶部。

But to get the back links to fadein/out the divs properly I had to create each back link with a separate class, and separate function to get the desired result. 但是为了使反向链接正确地淡入/淡出div，我必须使用单独的类和函数来创建每个反向链接，以获得所需的结果。

Here is the Jquery: 这是Jquery： 

$(document).ready(function() {


  $(".Subone").click(function() {
    $("#main-slide").fadeOut(1200);
    $("#sub-slide-one").delay(1200).fadeIn(1200);

  });

  $(".Subtwo").click(function() {
    $("#main-slide").fadeOut(1200);
    $("#sub-slide-two").delay(1200).fadeIn(1200);

  });

  $(".Subthree").click(function() {
    $("#main-slide").fadeOut(1200);
    $("#sub-slide-three").delay(1200).fadeIn(1200);

  });


  $(".BackMain1").click(function() {
    $("#sub-slide-one").fadeOut(1200);
    $("#main-slide").delay(1200).fadeIn(1200);

  });

  $(".BackMain2").click(function() {
    $("#sub-slide-two").fadeOut(1200);
    $("#main-slide").delay(1200).fadeIn(1200);

  });

  $(".BackMain3").click(function() {
    $("#sub-slide-three").fadeOut(1200);
    $("#main-slide").delay(1200).fadeIn(1200);

  });


});

I have to believe there is a much more efficient way to do this, but I can't seem to figure out how. 我必须相信有一种更有效的方法来执行此操作，但是我似乎无法弄清楚该如何做。 Here's a link to JSfiddle to see this in action https://jsfiddle.net/Dylancougar/k9f53wpp/ 这是JSfiddle的链接，可在运行中查看此内容https://jsfiddle.net/Dylancougar/k9f53wpp/

2 个解决方案

解决方案1
 0 已采纳  2016-09-10 20:04:57

Define a common class for parent menu and also an ID to use it as a relation between parent and children menu. 为父菜单定义一个通用类，并定义一个ID以将其用作父菜单和子菜单之间的关系。 Get the ID on Click and use it to decide which submenu has to react : 在Click上获取ID，并使用它来确定哪个子菜单必须做出反应： 

 <div id="main-slide">

    <a class="topmenu" id="1" href="#">SUB ONE</a>
    <a class="topmenu" id="2" href="#">SUB TWO</a>
    <a class="topmenu" id="3" href="#">SUB THREE</a>

  </div>


  <div id="sub-slide-1">

    <h1>SUB ONE</h1>

    <a class="Back" id="1" href="#">BACK TO MAIN</a>

  </div>

jquery: jQuery的： 

  $(".topmenu").click(function() {
    var id=$(this).attr("id");
    $("#main-slide").fadeOut(1200);
    $("#sub-slide-"+id).delay(1200).fadeIn(1200);
  });

and use same method for closing the proper submenu. 并使用相同的方法关闭适当的子菜单。 

  $(".back").click(function() {
    var id=$(this).attr("id");
    $("#sub-slide-"+id).fadeOut(1200);
    $("#main-slide").delay(1200).fadeIn(1200);
  });

Please consider that repeating and ID within a single page is not suggested. 请考虑不建议在单个页面中重复和ID。 So you can define more complex IDs eg open1 or close1 and remove the extra words before calculations. 因此，您可以定义更复杂的ID，例如open1或close1，并在计算之前删除多余的单词。

var id=$(this).attr("id").replace("open","");

解决方案2
 0  2016-09-10 20:25:33

You can achieve what you want like this . 您可以像这样实现您想要的。 So you will have to change your HTML structure by adding a common class for every same elements and add an id for each of them. 因此，您将必须通过为每个相同的元素添加一个通用类并为每个元素添加一个ID来更改HTML结构。 It will change your CSS a bit. 它将稍微改变您的CSS。

JS JS 

$(function () {
  $(".sub").on('click', function (e) {
    let number = $(this).attr('id').split('-')[1];

    $("#main-slide").fadeOut(1200);
    $("#sub-slide-" + number).delay(1200).fadeIn(1200);

    e.preventDefault();
  });

  $(".backMain").on('click', function (e) {
    let number = $(this).attr('id').split('-')[1];

    $("#sub-slide-" + number).fadeOut(1200);
    $("#main-slide").delay(1200).fadeIn(1200);

    e.preventDefault();
  });
});

Add e.preventDefault() will avoid to go to top when clicking on a link. 添加e.preventDefault（）可以避免在单击链接时转到顶部。 It's pretty the same solution than Ali Sheikhpour gave you. 这与Ali Sheikhpour给您的解决方案几乎相同。 By this way it's easy to maintain and very understandable (with no repetitions). 通过这种方式，它易于维护并且非常易于理解（没有重复）。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 寻找一种更有效的方式来编写这个 Javascript - Looking for a more efficient way to write this Javascript 编写jQuery函数的更有效方法 - More efficient way to write jQuery function 有没有更有效的方式来编写此代码？ - Is there a more efficient way to write this? 寻找一种保持菜单选项卡有效的方式 - Looking for an efficient way of keeping menu tab up 有没有更有效的方法来编写这个函数？ - Is there a more efficient way to write this function? 如果/其他则更有效地编写此方法 - More efficient way to write this if/else 有没有办法写这个更短或更有效？ - Is there way to write this shorter or more efficient? 在 jquery 中使用 .on() 的更有效方式 - more efficient way of using .on() in jquery jQuery-有没有更有效的方法来做到这一点？ - jQuery - Is there a more efficient way to do this? 编写此DOM操作的更有效/适当的方法？ - More efficient/appropriate way to write this DOM manipulation?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM