如何改進和使選單項上的添加類和洗掉類更健壯？

有什么辦法可以改進我的代碼型別嗎？我正在嘗試添加/洗掉選單項的類active或check選單項中的類。我的選單就像帶有prev和next按鈕的步驟。

我在這里的唯一目標是減少和改進 jQuery 代碼。

這是我的代碼：

HTML

<nav class="test-sidebar">

    <ul class="menus list-unstyled components">
        <li class="active">
            <a href="#" data-target="test_1"><span>Test 1</span></a>
        </li>
        <li>
            <a href="#" data-target="test_2"></i><span>Test 2</span></a>
        </li>
        <li>
            <a href="#" data-target="test_3"><span>Test 3</span></a>
        </li>
        <li>
            <a href="#" data-target="test_4"><span>Test 4</span></a>
        </li>
        <li>
            <a href="#" data-target="test_5"><span>Test 5</span></a>
        </li>
        <li>
            <a href="#" data-target="test_6"><span>Test 6</span></a>
        </li>
        <li>
            <a href="#" data-target="test_7"><span>Test 7</span></a>
        </li>
    </ul>
</nav>

<button data-target="test_2" class="prev-page-btn w-100">Back</button>

JS

$(document).ready(function () {
    // load the function
    prevPageButtons();
  });

// function for Previous buttons
function prevPageButtons() {
    // setting target from data attributes
    var target, container;
  
    $("body").on("click", ".prev-page-btn", function (e) {
      target = $(this).attr('data-target'),
        container = $('#get_content');
  
      container.load(target   '.php');
  
      if (target == "test_1") {
        $(".test-sidebar ul li:first-child").removeClass('check').addClass('active');
        $(".test-sidebar ul li:nth-child(2)").removeClass('active');
      }
  
      if (target == "test_2") {
        $(".test-sidebar ul li:nth-child(2)").removeClass('check').addClass('active');
        $(".test-sidebar ul li:nth-child(3)").removeClass('active');
      }
  
      if (target == "test_3") {
        $(".test-sidebar ul li:nth-child(3)").removeClass('check').addClass('active');
        $(".test-sidebar ul li:nth-child(4)").removeClass('active');
      }
  
      if (target == "test_4") {
        $(".test-sidebar ul li:nth-child(4)").removeClass('check').addClass('active');
        $(".test-sidebar ul li:nth-child(5)").removeClass('active');
      }
  
      if (target == "test_5") {
        $(".test-sidebar ul li:nth-child(5)").removeClass('check').addClass('active');
        $(".test-sidebar ul li:nth-child(6)").removeClass('active');
      }
  
      if (target == "test_6") {
        $(".test-sidebar ul li:nth-child(6)").removeClass('check').addClass('active');
        $(".test-sidebar ul li:nth-child(7)").removeClass('active');
      }
  
    });
  }

我試圖nth-childs通過不在我的jQuery. 無論如何通過不nth-childs用于洗掉和添加類來實作這一點。我正在考慮使用prevAll()函式或任何型別，但我如何實作它？

只想專注于改進jQuery.

uj5u.com熱心網友回復：

從data-target，您可以到達要添加的元素active，然后使用它.next來獲取下一個兄弟元素。

使用不同的資料屬性也會很好 - 不要對按鈕和<a>s使用相同的屬性。也許呼叫<a>sdata-name代替，例如

<a href="#" data-name="test_1"><span>Test 1</span></a>

然后，替換所有

if (target == "test_1") {

只有：

$("body").on("click", ".prev-page-btn", function(e) {
  const target = $(this).attr('data-target');
  const container = $('#get_content');
  const li = $(`[data-name="${target}"]`).parent();
  li.removeClass('check').addClass('active');
  li.next().removeClass('check');
});

現場演示：

$("body").on("click", ".prev-page-btn", function(e) {
  const target = $(this).attr('data-target');
  const container = $('#get_content');
  const li = $(`[data-name="${target}"]`).parent();
  li.removeClass('check').addClass('active');
  li.next().removeClass('check');
});

.active {
  background-color: yellow;
}
.check {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="test-sidebar">

  <ul class="menus list-unstyled components">
    <li>
      <a href="#" data-name="test_1"><span>Test 1</span></a>
    </li>
    <li class="check">
      <a href="#" data-name="test_2"></i><span>Test 2</span></a>
    </li>
    <li class="check">
      <a href="#" data-name="test_3"><span>Test 3</span></a>
    </li>
    <li>
      <a href="#" data-name="test_4"><span>Test 4</span></a>
    </li>
    <li>
      <a href="#" data-name="test_5"><span>Test 5</span></a>
    </li>
    <li>
      <a href="#" data-name="test_6"><span>Test 6</span></a>
    </li>
    <li>
      <a href="#" data-name="test_7"><span>Test 7</span></a>
    </li>
  </ul>
</nav>

<button data-target="test_2" class="prev-page-btn w-100">Back</button>

根據<button>s 的排列方式，您可能能夠完全擺脫 data 屬性，而是使用單擊按鈕的索引導航到相同的 indexed <li>。

標籤：查询

上一篇：從字體真棒圖示播放聲音

下一篇：Blazor-防止兄弟事件觸發（onclick>onfocusout）