0

объясните непонимающему контекст THIS, как мне сделать данную функцию универсальной, имею представление о том как работет THIS, но не имею представления как использовать эту фичу в данном примере. Допустим таких разделов с одинаковыми классами на странице будет 3-4 штуки, не писать же под каждый раздел свою функцию.

p.s прошу не ругать за код, учусь, пишу как умею, все с чего то начинали.

otherItemsLoad(".container",".item", ".loadMore");

function otherItemsLoad(selector, item, loadButton){

	//Начальное значение для отображения 3 item
	ic = 3;
  
	var items = $(selector).children(item);

	//Подгрузка по клику
	$(loadButton).click(function(){
		ic += 4; // Еще +4 item
		loads();
	});

	function loads(){

		for(i = 0; i < ic; i++){
			//Показываем item
			items.eq(i).show();

			//Отключаем кнопку
			if(ic >= items.length){
				$(loadButton).css({
					"opacity": "0.3",
					"pointer-events": "none"
				});
			}
		}
	}
	loads();
}
*{
  padding: 0;
  margin: 0;
}
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item{
  width: 23%;
  height: 100px;
  border: 1px solid red;
  background: yellow;
  display: none;
}
.loadMore{
  width: 23%;
  height: 100px;
  background: red;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="loadMore">ЗАГРУЗИТЬ</div>
</div>

9
  • причем тут this, если в коде он нигде не используется?
    – Grundy
    12 фев 2019 в 10:15
  • Извините, при чем здесь this? 12 фев 2019 в 10:15
  • @Grundy, в том то и дело что я хочу его использовать, но не пойму как его в данном случае применить, если таких разделов с одинаковыми классами на странице будет несколько
    – user298256
    12 фев 2019 в 10:19
  • @Vearo это все конечна можно лучше написать, но this это ваш текущий объект, его использовать конечна можно, но он не всегда нужен, так вот, "с одинаковыми классами на странице будет 3-4 штуки" вы думали про добавление идентификаторов?
    – dmshm
    12 фев 2019 в 10:27
  • @Dmitry думал, но хочу решить данный вопрос именно в таком виде, возможно больше пойму работу THIS
    – user298256
    12 фев 2019 в 10:29

1 ответ 1

1

Чтобы применить функцию к каждому элементу в выборке нужно воспользоваться методом .each

В это случае внутри переданного callback this будет указывать на текущий элемент. Все остальное можно оставить как есть, например:

otherItemsLoad(".container", ".item", ".loadMore");

function otherItemsLoad(selector, item, loadButton) {

  $(selector).each(function() {

    //Начальное значение для отображения 3 item
    var ic = 3;
    var container = $(this); // говорим что container - текущий элемент
    var items = container.children(item);

    //Подгрузка по клику
    container.find(loadButton).click(function() {
      ic += 4; // Еще +4 item
      loads();
    });

    function loads() {

      for (var i = 0; i < ic; i++) {
        //Показываем item
        items.eq(i).show();

        //Отключаем кнопку
        if (ic >= items.length) {
          container.find(loadButton).css({
            "opacity": "0.3",
            "pointer-events": "none"
          });
        }
      }
    }
    loads();
  });

}
* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 23%;
  height: 100px;
  border: 1px solid red;
  background: yellow;
  display: none;
}

.loadMore {
  width: 23%;
  height: 100px;
  background: red;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="loadMore">ЗАГРУЗИТЬ</div>
</div>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="loadMore">ЗАГРУЗИТЬ</div>
</div>

1
  • Благодарю. Думал в сторону each
    – user298256
    12 фев 2019 в 10:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.