Как мне переключить один элемент без других с помощью jQuery?

Question

Мне было интересно, как я могу переключать один элемент, не переключая другие ... Я просто не хочу делать это каждый раз:

HTML:

<div class="share-toggle as-1"></div>

<div class="audio-share as1">
  <p>Some Text</p>
</div>

<div class="share-toggle as-2"></div>

<div class="audio-share as2">
  <p>Some Text</p>
</div>

JS:

$('.as-1').click(function() {
  $('.as1').slideToggle('fast');
});

$('.as-2').click(function() {
  $('.as2').slideToggle('fast');
});

Есть ли способ написать это вкратце? Пожалуйста, помогите ... THX

Answer 1

Я знаю, что вы уже приняли ответ, но в любом случае ...
Вот, на мой взгляд, лучшее решение.

Почему это так?
Только 3 строки кода, без использования регулярных выражений или частичных имен классов ...
См. Комментарии в моем коде для получения более подробной информации:

// You could use class^=[as-] to filter on the classes that start with as-,
// (the ^ would be better than a *, because more specific)
// But I suggest you to use the 'share-toggle' class, there's no need to complicate things here:
$('.share-toggle').on('click', function(){
  // The following will get the .audio-share element that is after the element we just clicked,
  // If your HTML structure is gonna stay well structured like this, it's the finest solution:
  $(this).next('.audio-share').slideToggle('fast');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share-toggle as-1">[ CLICK HERE ]</div>

<div class="audio-share as1">
  <p>Some Text</p>
</div>

<div class="share-toggle as-2">[ CLICK HERE ]</div>

<div class="audio-share as2">
  <p>Some Text</p>
</div>

Я надеюсь, что вы рассмотрите этот ответ.
И я надеюсь, что это поможет!

Answer 2

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

$('*[class*="as-"]')

Это выберет все элементы в DOM (*), из которых className([class=""]) содержит "as-" в любом месте (*).

И затем вы можете использовать Элемент, переданный как this, чтобы получить номер элемента после "as-" и переключениеРазыскиваемый элемент:

$('*[class*="as-"]').click(function () {
  let elemNum = this.className.match(/as-(\d+)/)[1];
  $("as"+elemNum).slideToggle('fast');
});