БЛОГ НА HUSL


this как в jquery, но на javascript

Автор вопроса: Aleksandr 

$(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);
});

В консоле выводится "Click", а в текст не меняется, я по разному пробовал, ничего.


Источник

Ответы (2 шт):

Автор решения: artomich

textContent - это свойство, а не метод. Должно быть this.textContent = 'скрыть';. И bind здесь не нужен.
Кроме того, здесь можно спокойно обойтись стрелочной функцией. Тогда все будет без this и по-современному...

[...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);
});
→ Ссылка
Автор решения: OPTIMUS PRIME

Ваша функция без 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>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.