时间戳

首页 > 解决方案 > Jquery：以前可以工作但不再起作用的功能

jquery - Jquery：以前可以工作但不再起作用的功能

问题描述

我一直在为学校设计一个网站并编写 html 和 css。我不知道 jquery，所以有人帮助了那部分。一切都运行良好。但后来我添加了另一个函数 displayImages （在另一位朋友的帮助下），这使得以前的部分代码不再工作。这很可能是一个超级简单的错误，但我不知道如何解决它，所以非常感谢任何帮助！网站：http ://brand.housingcrisis.nl/

两个问题：

jQuery 代码在这里（我只放了 2 个侧边栏项，但实际代码中有 10-15 个）我已经留下了第一个帮助的朋友的评论，因为我想它可能会有所帮助。


function displayImages() {

  var x = document.getElementById("images-grid");
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
    var e = document.getElementsByClassName("image-toggle");
    e.classList.toggle("active");
  } else {
    x.style.display = "none";
  }
}


var sidebarElementType = 'h4';

var sidebarItems = [{
  title: 'students ',
  tag: 'students',
  count: 64,
}, {
  title: 'investors',
  tag: 'investors',
  count: 143,
}];

function createSideBarItems() {
  const sidebarSelector = document.querySelector('div.sidebar .items');
  sidebarItems.forEach((item) => {
    const newElement = document.createElement(sidebarElementType);
    newElement.setAttribute('data-tag', item.tag);
    newElement.classList.add('clickable-tag');
    newElement.innerText = item.title
    sidebarSelector.appendChild(newElement);
  });
}

function on() {
  document.getElementById("overlay-box").style.display = "block";
}

function off() {
  document.getElementById("overlay-box").style.display = "none";
}



/** ------ START: SIDEBAR CATEGORY HANDLERS ----- */

/* 
  Handles toggling of the category in the main text. First it will
  find all the existing active items and deactivate them, then it
  will only add the active class to the items of the newly selected
  category. This only will be activated if the clicked item on the
  left is in an active state (e.g. if the item was active and you
  click it again it will deactivate all the items along with itself)
*/
function toggleCategoryItem(className, isActive) {
  // remove all others
  document.querySelectorAll('.main span.active').forEach(el => {
    el.classList.remove('active');
  });

  document.querySelector('.main').classList.remove('has-active-category');

  // add active class if is activated
  if (isActive) {
    document.querySelector('.main').classList.add('has-active-category');
    document.querySelectorAll(`.main .${className}`).forEach(el => {
      el.classList.add('active');
    });
  }
}

/**
  This will find the counter element in the main text, and will
  find the provided category information based on the tag in the
  first argument when this function is called. First it will
  remove the active class (for the toggling effect), and then add
  it back again if there is a category active currently with the
  count of the active category set as innertext.
  
  Next it will find the non-addressed-overlay item, and will toggle
  this on if the newly found category has a count of 0.
*/
function adjustCount(item, isActive) {
  const counterEl = document.querySelector('.main .counter');
  counterEl.classList.remove('active');
  // find selected item by tag id, if found then update counter;
  const selectedItem = sidebarItems.find(i => i.tag === item);
  if (selectedItem) {
    counterEl.innerText = `Count: ${selectedItem.count}`;
  }

  const overlayEl = document.querySelector('.non-addressed-overlay');
  overlayEl.classList.remove('active');

  if (isActive) {
    counterEl.classList.add('active');

    if (selectedItem && selectedItem.count === 0) {
      overlayEl.classList.add('active');
    }
  }
}

/**
  This creates events listeners for the category toggles on the left.
  First it will find all the available items, and deactivate the
  existing category (if there was one). Afterwards it will toggle
  into the new [in]active state, and will also trigger the activation
  of items in the main text and update the count element in the main
  text.
*/
function createCategoryToggleListeners() {
  const tagSelectors = `${sidebarElementType}.clickable-tag`;
  document.querySelectorAll(tagSelectors).forEach(el => {

    el.addEventListener('click', function () {
      /** Remove all existing active for siblings classes */
      document.querySelectorAll(tagSelectors).forEach(item => {
        if (item.dataset.tag !== el.dataset.tag) {
          item.classList.remove('active');
        }
      });

      el.classList.toggle('active');
      const isActive = !!el.classList.contains('active');
      toggleCategoryItem(`${el.dataset.tag}-item`, isActive);
      adjustCount(el.dataset.tag, isActive);
    });
  });
}

/**
  This code will basically activate the toggles on the left and add
  the active class, and will do the same with the corresponding
  items in the main text. in this case key highlights with have the
  <span class="ti-key-high"> ... </span> tag surrounding it. Same
  applies for the language tages, however with 'ti-lang-tone' and
  'ti-lang-strat' attached to it.
*/

const toggleClasses = ['key-high', 'lang-tone', 'lang-strat', 'new-image'];

function activateToggle(toggleName) {
  const indicatorEl = document.querySelector(`.${toggleName}-indicator`);
  indicatorEl.classList.toggle('active');
  document.querySelector('.main').classList.toggle('has-active-toggle');

  document.querySelectorAll(`span.ti-${toggleName}`).forEach(el => {
    el.classList.toggle(`ti-${toggleName}-active`)
  });
}

function addToggleEventListeners() {
  // create event listeners for the toggles in the sidebar
  toggleClasses.forEach(item => {
    const element = document.querySelector(`.toggle-${item}`);
    if (element) {
      element.addEventListener('click', function () {
        activateToggle(item);
      })
    }
  });
}

document.addEventListener('DOMContentLoaded', function () {
  // create the items in the sidebar
  createSideBarItems();

  createCategoryToggleListeners();
  addToggleEventListeners();

});

非常感谢您的帮助，我希望可以做点什么！

标签： jquerytags

解决方案

推荐阅读