主页 / 问题 / 1171638
Accepted
Aleksandr
Asked:2020-08-28 20:55:06 +0000 UTC2020-08-28 20:55:06 +0000 UTC

这在 jquery 中，但在 javascript 中

  • 772

$(document).ready(function() {
  $('.show').click(function() {
    let thisText = $(this).text();

    $(this).siblings('.search').fadeToggle().focus();

    if (thisText !== 'Скрыть') {
      $(this).text('Скрыть');
      $(this).siblings('.list').addClass('scroll');
    } else {
      $(this).text('Посмотреть все');
      $(this).siblings('.list').removeClass('scroll');
    }
  });
});
div .search {
  margin-bottom: 30px;
  display: none
}

.list {
  margin-bottom: 30px;
  height: 100px;
  overflow-y: hidden;
}

.list label {
  display: block
}

.scroll {
  color: #999;
  overflow-y: scroll;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h4 class="title">Регион</h4>

  <div>
    <input type="text" class="search form-control">

    <div class="list">
      <label>
                <input type="checkbox" checked>
                <span>Абруццо</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Альто-Адидже</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Аминдеон</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Апулия</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Арагацотн</span>
            </label>
      <label>
                <input type="checkbox" checked>
                <span>Абруццо</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Альто-Адидже</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Аминдеон</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Апулия</span>
            </label>
      <label>
                <input type="checkbox">
                <span>Арагацотн</span>
            </label>
    </div>

    <button class="show btn btn-primary">Посмотреть все</button>
  </div>
</div>

这是我在 javaScript 中尝试做的事情：

document.querySelectorAll('.show').forEach(item => {
    item.addEventListener('click', function(e) {
        console.log('Click');
        this.textContent('скрыть');
    }.bind(this), false);
});

控制台显示“点击”，但文字没有改变，我用不同的方式尝试过，没有。

javascript

2 个回答

  1. Best Answer

    textContent是属性，不是方法。应该是this.textContent = 'скрыть';。而且bind这里不需要。
    此外，在这里您可以安全地使用箭头功能。那么一切都将没有这个，并且以现代的方式......

    [...document.querySelectorAll('.js__catalog-filter__show')].forEach(item => {
    item.addEventListener('click', e => {
        console.log('Click');
        item.textContent = 'скрыть';
    });
});

    编辑：这是一个更好的版本 
    const catalogClickHandler = () => {
    console.log('click');
    event.currentTarget.textContent = 'скрыть';
}

document.querySelectorAll('.js__catalog-filter__show').forEach(item => {
    item.addEventListener('click', catalogClickHandler);
});
    • 5

  2. 没有 jQuery 的函数：

    document.addEventListener("DOMContentLoaded", function() {
  let btnShow = document.querySelectorAll(".show");
  for (let i = 0; btnShow[i]; i++) {
    btnShow[i].addEventListener("click", toggleList);
  } // При вызове функции, addEventListener и так привязывает this === btnShow[i]

  /***/
  function toggleList() {
    fadeToggle( this.parentNode.querySelector(".search") ).focus();

    let list = this.parentNode.querySelector(".list");
    // Это не то же самое, что siblings. Учитывая разметку - прокатит.

    if (this.textContent == "Скрыть") {
      this.textContent = "Посмотреть все";
      list.classList.remove("scroll");
    } else {
      this.textContent = "Скрыть";
      list.classList.add("scroll");
    }
  }
});



/*****/
function fadeToggle(elem) {
  var display = (getComputedStyle(elem).display);

  return display == "none" ? fadeIn(elem) : fadeOut(elem);
}

function fadeIn(elem) {
  elem.style.opacity = "0";
  elem.style.transition = "0.5s";
  elem.style.display = "block";

  setTimeout(function() {
    elem.style.opacity = "1";

    setTimeout(function() {
      elem.style.transition = "";
    }, 500);
  }, 0);

  return elem;
}

function fadeOut(elem) {
  elem.style.opacity = "1";
  elem.style.transition = "0.5s";
  elem.style.display = "block";

  setTimeout(function() {
    elem.style.opacity = "0";

    setTimeout(function() {
      elem.style.transition = "";
      elem.style.display = "none";
    }, 500);
  }, 0);

  return elem;
}
    div .search {
  margin-bottom: 30px;
  display: none
}

.list {
  margin-bottom: 30px;
  height: 100px;
  overflow-y: hidden;
}

.list label {
  display: block
}

.scroll {
  color: #999;
  overflow-y: scroll;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h4 class="title">Регион</h4>

  <div>
    <input type="text" class="search form-control">

    <div class="list">
      <label>
        <input type="checkbox" checked>
        <span>Абруццо</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Альто-Адидже</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Аминдеон</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Апулия</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Арагацотн</span>
      </label>
      <label>
        <input type="checkbox" checked>
        <span>Абруццо</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Альто-Адидже</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Аминдеон</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Апулия</span>
      </label>
      <label>
        <input type="checkbox">
        <span>Арагацотн</span>
      </label>
    </div>

    <button class="show btn btn-primary">Посмотреть все</button>
  </div>
</div>

    • 1

相关问题