尋找一種更有效的方式編寫此jquery菜單

Question

我對Jquery還是很陌生，所以我一直在遍歷w3schools.com上的一些示例，以獲取一些如何編寫更好的代碼的想法。 出於好奇，我想出了一個非常簡單的菜單，它具有四個div，一個名為#main-slide的主div包含三個指向三個子幻燈片sub-slide-one ， sub-slide-two ， sub-slide-three 。 順便說一句，無論出於什么原因，這些都沒有實際滑入或滑出。

這是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>

這是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
}

對於JavaScript，每個鏈接上都有一個淡入/淡出單擊功能。 例如，當單擊Subone時， #main-slide淡出， sub-slide-one淡入。每個子幻燈片都包含一個反向鏈接，該鏈接鏈接回到主幻燈片。 這是我最終遇到問題的地方，菜單按預期工作，盡管當我單擊SubThree鏈接時，無論出於何種原因，它都會跳至頂部。

但是為了使反向鏈接正確地淡入/淡出div，我必須使用單獨的類和函數來創建每個反向鏈接，以獲得所需的結果。

這是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);

  });


});

我必須相信有一種更有效的方法來執行此操作，但是我似乎無法弄清楚該如何做。 這是JSfiddle的鏈接，可在運行中查看此內容https://jsfiddle.net/Dylancougar/k9f53wpp/

Answer 1

為父菜單定義一個通用類，並定義一個ID以將其用作父菜單和子菜單之間的關系。 在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的：

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

並使用相同的方法關閉適當的子菜單。

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

請考慮不建議在單個頁面中重復和ID。 因此，您可以定義更復雜的ID，例如open1或close1，並在計算之前刪除多余的單詞。

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

Answer 2

您可以像這樣實現您想要的。 因此，您將必須通過為每個相同的元素添加一個通用類並為每個元素添加一個ID來更改HTML結構。 它將稍微改變您的CSS。

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();
  });
});

添加e.preventDefault（）可以避免在單擊鏈接時轉到頂部。 這與Ali Sheikhpour給您的解決方案幾乎相同。 通過這種方式，它易於維護並且非常易於理解（沒有重復）。

尋找一種更有效的方式編寫此jquery菜單

問題描述

2 個解決方案

解決方案1
0 已采納 2016-09-10 20:04:57

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

尋找一種更有效的方式編寫此jquery菜單

問題描述

2 個解決方案

解決方案1 0 已采納 2016-09-10 20:04:57

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

解決方案1
0 已采納 2016-09-10 20:04:57

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