Редактирование функции jQuery для изменения 2 идентификаторов вместо 1

ProgramBox

Редактирование функции jQuery для изменения 2 идентификаторов вместо 1

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#javascript #jquery #twitter-bootstrap

Вопрос:

На моей веб-странице есть таблица bootstrap 5, и в ней есть некоторый пользовательский код, который позволяет нажимать стрелки влево / вправо для смены вкладок. Если я хочу добавить второй загрузочный список таблиц 5 с новым идентификатором, как я могу отредактировать свой код, чтобы включить новый идентификатор и повлиять на этот список таблиц?

Ожидаемый результат: над каждым списком таблиц есть свои стрелки, которые влияют только на список таблиц под ним, чтобы переключать вкладки next / previous при нажатии.

HTML:

 <div>
    <div class="tab-container">
        <div class="row">
            <div class="col-6 col-sm-12 title-text variation-one mb-3 mb-lg-0 ps-4">
                <h2>Learning Products</h2>
            </div>
            <div class="col-6 tab-container-arrows text-end pe-4">
                <a class="d-inline-block me-2" id="previous">
                    <img src="/assets/images/icons/left-arrow.svg" alt="Right Arrow" class="left-arrow">
                </a>
                <a class="d-inline-block ms-2" id="next">
                    <img src="/assets/images/icons/right-arrow.svg" alt="Left Arrow" class="left-arrow">
                </a>
            </div>
        </div>
        <ul class="nav nav-tabs" role="tablist" id="learningTabs" aria-owns="software-tab courses-tab accessories-tab popular-tab">
            <li class="nav-item" role="tab">
                <a class="nav-link active" id="software-tab" data-index="1" data-bs-toggle="tab" data-bs-target="#software">Shop Software</a>
            </li>
            <li class="nav-item" role="tab">
                <a class="nav-link" id="courses-tab" data-index="2" data-bs-toggle="tab" data-bs-target="#courses">Shop Courses</a>
            </li>
            <li class="nav-item" role="tab">
                <a class="nav-link" id="accessories-tab" data-index="3" data-bs-toggle="tab" data-bs-target="#prep">Shop Accessories</a>
            </li>
            <li class="nav-item" role="tab">
                <a class="nav-link" id="popular-tab" data-index="4" data-bs-toggle="tab" data-bs-target="#popular">Shop Popular Items</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="software">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="image-container">
                            <div class="text-pill">
                                <span>Shop Software</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h3>What do you want to learn today?</h3>
                        <p>Buy or rent textbooks, learn new subjects and skills on your own, or get the materials to prep for tests and certifications. Our books cover a wide range of topics, from accounting to world languages.</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="courses">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="image-container">
                            <div class="text-pill">
                                <span>Shop courses</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h3>Improve student outcomes and classroom learning.</h3>
                        <p>Buy our courses with learning technology you need to increase confidence in your classroom. Teaching and learning made easy. </p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="accessories">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="image-container">
                            <div class="text-pill">
                                <span>Shop Accessories</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h3>Review courses to help pass your next test.</h3>
                        <p>Get the materials you need to prep for tests and certifications. </p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="popular">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="image-container">
                            <div class="text-pill">
                                <span>Shop Imprints</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h3>Learn something new.</h3>
                        <p>Buy our popular items to help you learn a new skill or get training material. Our brands and imprints cover a wide range of titles.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

 $(document).ready(function() {
var learningTabs = $("#learningTabs");
var currentActive, NextID, PreviousID;
$('#next').on('click', function(event) {
    currentActive = $("#learningTabs li > a.active");
    NextID = Math.min((parseInt($(currentActive).attr('data-index'))   1), $("#learningTabs li").length);
    if (NextID !== parseInt($(currentActive).attr('data-index'))) {
        $(learningTabs).find("li a[data-index='"   NextID   "']")[0].click();
    }
});

$('#previous').on('click', function(event) {
    currentActive = $("#learningTabs li > a.active");
    PreviousID = Math.max((parseInt($(currentActive).attr('data-index')) - 1), 1);
    if (PreviousID !== parseInt($(currentActive).attr('data-index'))) {
        $(learningTabs).find("li a[data-index='"   PreviousID   "']")[0].click();
    }
  });
});

1. Я бы посоветовал вам переключиться на использование Class вместо ID для различных элементов. Таким образом, вы можете иметь родительский элемент с одним идентификатором, а затем определять конкретные кнопки, которые являются дочерними элементами этого идентификатора.

2. в спецификациях указано, что каждый идентификатор может принадлежать только одному элементу.

3. $('#next') получит ПЕРВЫЙ элемент с этим идентификатором. У вас может быть тысяча… jQuery это не волнует. Таким образом, вы должны сделать так, чтобы ваш код БЫЛ ЧЕТКО нацелен на один элемент. — ОПУБЛИКОВАТЬ HTML .. Наверняка есть способ.

4. если next, previous находится в learningTabs, вы можете это сделать learningTabs.find('#next').on.. , хотя вы всегда должны использовать классы, если у вас есть несколько элементов (что почти всегда)

5. Вопрос в том… Несколько идентификаторов также используются для других элементов? — Вероятно. — Опубликуйте HTML, чтобы получить точные рекомендации.

Ответ №1:

Общая идея обхода jQuery DOM всегда заключается в том, чтобы начинать с цели щелчка… Чтобы найти ближайшего соответствующего родителя, который может быть «корнем» шаблона и в котором можно найти элементы, которые мы хотим для этого фрагмента шаблона.

Внимательно посмотрите на обработчики кликов.

В DOM transversing мы обычно работаем с классами (или с использованием селекторов атрибутов, с типами, атрибутами, такими как name, aria-x, data-x и т. Д.), Но нервнее с идентификаторами… Которые предназначены для УНИКАЛЬНЫХ элементов. И уникальный — это не то, что может быть учтено в шаблоне структуры DOM «repeated».

Взгляните на эту уродливо выглядящую демонстрацию (потому что сегодня мне лень заниматься CSS). Предполагается, что он будет вести себя так, как вы пожелаете.

 console.clear()

$(document).ready(function () {
  $(".next").on("click", function (event) {
    
    let nav = $(this).closest(".tab-container").find(".nav")
    let nav_links = nav.find(".nav-link");
    let link_count = nav_links.length;
    let navLink_active_index = nav.find(".nav-link.active").parent().index();
    
    nav_links.eq( (navLink_active_index   1) % link_count )[0].click()
  });

  $(".previous").on("click", function (event) {
    let nav = $(this).closest(".tab-container").find(".nav")
    let nav_links = nav.find(".nav-link");
    let link_count = nav_links.length;
    let navLink_active_index = nav.find(".nav-link.active").parent().index();
    
    nav_links.eq( (navLink_active_index - 1) % link_count )[0].click()
  });
});

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div class="tab-container">
    <div class="row">
      <div class="col-6 col-sm-12 title-text variation-one mb-3 mb-lg-0 ps-4">
        <h2>Learning Products</h2>
      </div>
      <div class="col-6 tab-container-arrows text-end pe-4">
        <a class="d-inline-block me-2 previous">
          <img src="/2022-assets/images/icons/left-arrow.svg" alt="Right Arrow" class="left-arrow">
        </a>
        <a class="d-inline-block ms-2 next">
          <img src="/2022-assets/images/icons/right-arrow.svg" alt="Left Arrow" class="left-arrow">
        </a>
      </div>
    </div>
    <ul class="nav nav-tabs" role="tablist" class="learningTabs" aria-owns="software-tab courses-tab accessories-tab popular-tab">
      <li class="nav-item" role="tab">
        <a class="nav-link active" id="software-tab" data-index="1" data-bs-toggle="tab" data-bs-target="#software">Shop Software</a>
      </li>
      <li class="nav-item" role="tab">
        <a class="nav-link" id="courses-tab" data-index="2" data-bs-toggle="tab" data-bs-target="#courses">Shop Courses</a>
      </li>
      <li class="nav-item" role="tab">
        <a class="nav-link" id="accessories-tab" data-index="3" data-bs-toggle="tab" data-bs-target="#prep">Shop Accessories</a>
      </li>
      <li class="nav-item" role="tab">
        <a class="nav-link" id="popular-tab" data-index="4" data-bs-toggle="tab" data-bs-target="#popular">Shop Popular Items</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="software">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop Software</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>What do you want to learn today?</h3>
            <p>Buy or rent textbooks, learn new subjects and skills on your own, or get the materials to prep for tests and certifications. Our books cover a wide range of topics, from accounting to world languages.</p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="courses">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop courses</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>Improve student outcomes and classroom learning.</h3>
            <p>Buy our courses with learning technology you need to increase confidence in your classroom. Teaching and learning made easy. </p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="accessories">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop Accessories</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>Review courses to help pass your next test.</h3>
            <p>Get the materials you need to prep for tests and certifications. </p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="popular">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop Imprints</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>Learn something new.</h3>
            <p>Buy our popular items to help you learn a new skill or get training material. Our brands and imprints cover a wide range of titles.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
   <div class="tab-container">
    <div class="row">
      <div class="col-6 col-sm-12 title-text variation-one mb-3 mb-lg-0 ps-4">
        <h2>Some other Products</h2>
      </div>
      <div class="col-6 tab-container-arrows text-end pe-4">
        <a class="d-inline-block me-2 previous">
          <img src="/2022-assets/images/icons/left-arrow.svg" alt="Right Arrow" class="left-arrow">
        </a>
        <a class="d-inline-block ms-2 next">
          <img src="/2022-assets/images/icons/right-arrow.svg" alt="Left Arrow" class="left-arrow">
        </a>
      </div>
    </div>
    <ul class="nav nav-tabs" role="tablist" class="learningTabs" aria-owns="software-tab courses-tab accessories-tab popular-tab">
      <li class="nav-item" role="tab">
        <a class="nav-link active" id="software-tab" data-index="1" data-bs-toggle="tab" data-bs-target="#software_UNIQUEID">Shop Software</a>
      </li>
      <li class="nav-item" role="tab">
        <a class="nav-link" id="courses-tab" data-index="2" data-bs-toggle="tab" data-bs-target="#courses_UNIQUEID">Shop Courses</a>
      </li>
      <li class="nav-item" role="tab">
        <a class="nav-link" id="accessories-tab" data-index="3" data-bs-toggle="tab" data-bs-target="#prep_UNIQUEID">Shop Accessories</a>
      </li>
      <li class="nav-item" role="tab">
        <a class="nav-link" id="popular-tab" data-index="4" data-bs-toggle="tab" data-bs-target="#popular_UNIQUEID">Shop Popular Items</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="software_UNIQUEID">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop Software</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>What do you want to learn today?</h3>
            <p>Buy or rent textbooks, learn new subjects and skills on your own, or get the materials to prep for tests and certifications. Our books cover a wide range of topics, from accounting to world languages.</p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="courses_UNIQUEID">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop courses</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>Improve student outcomes and classroom learning.</h3>
            <p>Buy our courses with learning technology you need to increase confidence in your classroom. Teaching and learning made easy. </p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="accessories_UNIQUEID">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop Accessories</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>Review courses to help pass your next test.</h3>
            <p>Get the materials you need to prep for tests and certifications. </p>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="popular_UNIQUEID">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="image-container">
              <div class="text-pill">
                <span>Shop Imprints</span>
              </div>
            </div>
          </div>
          <div class="col-md-6 mt-4 mt-md-0">
            <h3>Learn something new.</h3>
            <p>Buy our popular items to help you learn a new skill or get training material. Our brands and imprints cover a wide range of titles.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Развернуть фрагмент

Метки: Редактирование функции jQuery для изменения 2 идентификаторов вместо 1

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Реализация IntentService с использованием LinkedBlockingQueue?

Не могу понять о трансляции тензора pytorch

Require.js/Jquery Datable : неопределенный не является функцией