將滑鼠懸停在一個div上時，如何將一個類添加到另一個div？

我正在嘗試向其中添加類，.sectionmenu div,但由于某種原因，div當我將滑鼠懸停在 上時.tabone .toggleClass，它會將類添加到兩個元素中，div該類具有相同的類。

當您懸停我們的第一個divie 時，.tabone .toggleClass它應該將 class 添加到 first div .sectionmenu，類似地，當您懸停我們的第二個divie 時，.tabone .toggleClass它應該將 class 添加到 second div .sectionmenu。

(function($) {
  $(document).ready(function() {
    $('.tabone .toggleClass').hover(function() {
      var mine = $(this).closest('.menubox');
      $(this).closest('.main-section').find('.sectionmenu').not(mine).removeClass('class_name');
      mine.addClass('class_name');
    });
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
  <div id="col1">
    <div class="hidden">hidden text</div>
  </div>
  <div id="col2" class="class">
    <div class="menubox tabone"> --> when hover over this div it should add class to first .sectionmenu div
      <a class="toggleClass">toggleClass</a>
      <a class="toggleClass">toggleClass</a>
    </div>
    <div class="menubox tabone">
      <a class="toggleClass">toggleClass</a>
      <a class="toggleClass">toggleClass</a>
    </div>
  </div>
  <div id="col3" class="class">
    <div class="sectionmenu">
      <div class="menubox">
        <a class="toggleClass">toggleClass</a>
        <a class="toggleClass">toggleClass</a>
      </div>
    </div>
    <div class="sectionmenu">
      <div class="menubox">
        <a class="toggleClass">toggleClass</a>
        <a class="toggleClass">toggleClass</a>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

一種方法如下，這里我們使用 jQuery 添加自定義data-*屬性，以便將元素關聯在一起：

// here we select elements with an 'id' attribute that starts with
// the string 'col',
// we then iterate over that collection of elements using the
// each() method:
$('[id^=col]').each(function() {
  // caching variables to avoid - where possible - repeated look-ups
  // for the same items;
  // here we cache the current element:
  let ancestor = $(this),
    // we then cache the '.menubox' descendants of the
    // current element:
    menuboxes = ancestor.find('.menubox'),
    // we then cache the '.toggleClass' elements:
    toggleClassLinks = ancestor.find('.toggleClass');

  // iterating over the menuboxes collection, and setting the
  // custom 'data-*' attribute (here named 'data-index'),
  // to contain the index of the current .menubox element
  // within the collection, or its index within the current
  // [id^=col] element:
  menuboxes.attr('data-index', function(i) {
    return i;
  });

  // if there are a non-zero number of '.toggleClass' elements:
  if (toggleClassLinks.length) {
    // we iterate over that collection and use the on() method
    // to bind the anonymous function as an event-handler for
    // the 'mouseenter' event:
    toggleClassLinks.on('mouseenter', function(e) {
      // caching the current .toggleClass element:
      let target = $(this),
        // caching the various elements:
        grandparent = target.closest('.main-section'),
        parent = target.closest('.menubox'),
        // caching the attribute-value of the 'data-index'
        // attribute we set earlier, using the data() method
        // (because of a peculiarity of the method we couldn't
        // set the attribute using that method, but retrieving
        // is consistent):
        index = parent.data('index');

      // here we find the elements with the class of 'class_name' within the
      // ancestor element, and remove that class:
      grandparent.find('.class_name').removeClass('class_name');

      // here we use a template-literal string to interpolate the 'index'
      // variable into the string, to create an attribute-selector wherein
      // the index is equal to the index of the currently hovered .toggleClass
      // element's parent:
      grandparent.find(`[data-index=${index}]`)
        // we then filter out the current .toggleClass element's parent:
        .not(parent)
        // and add the class_name class to the other remaining element(s)
        // that matched the original selector:
        .addClass('class_name');
    });
  }
});

*,
::before,
::after {
  box-sizing: border-box;
  font: 1rem / 1.5 sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid #000;
  padding: 0.5em;
}

.main-section {
  border-color: transparent;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  min-height: 50vh;
}

.main-section>div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.class_name,
.class_name .toggleClass {
  color: #f90;
  transition: color 0.3s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
  <div id="col1">
    <div class="hidden">hidden text</div>
  </div>
  <div id="col2" class="class">
    <div class="menubox tabone">
      <a href="#" class="toggleClass">toggleClass</a>
    </div>
    <div class="menubox tabone">
      <a href="#" class="toggleClass">toggleClass</a>
    </div>
  </div>
  <div id="col3" class="class">
    <div class="sectionmenu">
      <div class="menubox">
        <a href="#" class="toggleClass">toggleClass</a>
      </div>
    </div>
    <div class="sectionmenu">
      <div class="menubox">
        <a href="#" class="toggleClass">toggleClass</a>
      </div>
    </div>
  </div>
</div>

JS小提琴演示。

參考：

• addClass().
• attr().
• closest().
• data().
• find().
• not().
• on().
• removeClass().

標籤：

上一篇：如何在欄位輸入中添加新的串列項？

下一篇：需要在一組物件中將物件分組