Более умный JQuery Селектор? - PullRequest
Новая
       8

Более умный JQuery Селектор?

0 голосов
/ 08 марта 2020

В настоящее время в моем портфолио есть отдельные функции для открытия отдельных лайтбоксов. 

$(".project.clientA").click(function(){     
    $(".lightbox.clientA").addClass("open", 500);
});

$(".project.clientB").click(function(){     
    $(".lightbox.clientB").addClass("open", 500);
});

$(".project.clientC").click(function(){     
    $(".lightbox.clientC").addClass("open", 500);
});

Поскольку у меня есть такая функция для каждого проекта, когда у вас много проектов, это делает код довольно красивым длинный. Мне интересно, есть ли способ шаблонизировать это в одну функцию, которая работает для всех клиентов (clientA, clientB, client C, et c), говоря что-то вроде этого. 

$(".project.whateverclient").click(function(){      
    $(".lightbox.sameclient").addClass("open", 500);
});

Надеюсь, это имеет смысл.

Ответы [ 3 ]

0 голосов
/ 08 марта 2020

Дайте им общее имя класса и определите прослушиватель щелчков только для этого класса, как этот 

$('.button').click(event => {
  $(event.target).addClass('open');

  // for testing
  let dataBtn = $(event.target).attr('data-btn');
  console.log(`You click ${dataBtn} and class 'open' add to it.`);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" data-btn="firstBtn">submit</button>
<button class="button" data-btn="secondBtn">submit2</button>
<button class="button" data-btn="thirdBtn">submit3</button>
<button class="button" data-btn="fourthBtn">submit4</button>
0 голосов
/ 08 марта 2020

Посмотрите на приведенный ниже фрагмент. Это решение предполагает, что вы не можете или не будете изменять имя класса или структуру разметки; в противном случае одно из других опубликованных решений, вероятно, лучше. 

$(".trigger[class^='project'], .trigger[class*=' project']").click(function(e){
    const target = e.target;
    const classlist = target.classList;
    const project = [...classlist].find(className => className.startsWith('project'));
    $(`.target.${project}`).addClass("open", 500);
});
.trigger {
  display: inline-block;
  background-color: red;
  margin-right: 10px;
  height: 30px;
  width: 30px;
}

.target {
  display: inline-block;
  background-color: pink;
  margin-right: 10px;
  height: 30px;
  width: 30px;
}

.target.open {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="projectA trigger"></div>
  <div class="trigger projectB"></div>
  <div class="trigger projectC"></div>
</div>

<div>
  <div class="target projectA"></div>
  <div class="target projectB"></div>
  <div class="target projectC"></div>
</div>

Давайте распакуем JS:

0 голосов
/ 08 марта 2020

Разделение класса может помочь. Для "project clientA" сделайте это "project client nameOfA". Тогда вы можете использовать селектор $(".project.client")

Но если вы не можете сделать это, подстановочный знак jQuery, который хуже по производительности, будет: 

$('.project[class*=client]')

Для второго задача, вы должны знать фактическое имя клиента внутри тела функции, это должно помочь: 

Array.from(this.classList).filter(x => x.startsWith('client'))
...