クリック後のアイコンの変更

Question

トグルクラス でjQueryのアイコンをプラスからマイナスに変更する必要があります。すべての「スパン」アイコンをクリックした後に問題が発生しました。

// FAQ 
 
$('#content-in > article > div > ul > li > p').hide(); 
 
$('#content-in > article > div > ul > li > h3').click(function(e) { 
 
    e.preventDefault(); 
 
    // skrýt všechny spany 
 
    var $this = $(this).parent().find('p'); 
 
    $('#content-in > article > div > ul > li > p').not($this).hide(); 
 
    // rozjetí textu 
 
    $this.toggle("fast", "swing"); 
 

 
    // obarvení pozadí + další změny po kliknutí a rozjetí (u ostatních elementů se tato vlastnost neaplikuje) 
 
    var tittle = $("#content-in > article > div > ul > li > h3"); 
 
    $(tittle).toggleClass('activeLol'); 
 
    $(tittle).not(this).removeClass('activeLol'); 
 

 
    var $plus_minus = $('#content-in > article > div > ul > li > h3 > span'); 
 
    $plus_minus.toggleClass('fa-minus').toggleClass('fa-plus'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="Accordion mt30"> 
 
    <li class="Accordion-item"> 
 
    <h3 class="Accordion-item-title" style="text-align: left;"><span class="fa fa-plus"> </span>1. Pokud je vybrané zboží momentálně ve statusu objednáno u dodavatele či vyprodáno, co to znamená ?</h3> 
 
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu objednáno u dodavatele, bohužel není k dispozici. Produkty jsou objednány u našeho italského dodavatele s tím, že čekáme na jejich výrobu a následnou dopravu do České republiky. Dodací lhůta je však různě odlišná, 
 
     zpravidla 2-3 týdny (v některých případech může být delší).</p> 
 
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu vyprodáno, je bohužel dlouhodobě nedostupné s tím, že jeho naskladnění zatím nemáme potvrzeno.</p> 
 
    </li> 
 
    <li class="Accordion-item"> 
 
    <h3 class="Accordion-item-title"><span class="fa fa-plus"> </span>2. Pokud si objednám zboží, které je momentálně skladem, jaká je dodací lhůta ?</h3> 
 
    <p class="Accordion-item-content" style="display: none;">Při objednání produktů, které jsou na našich webových stránkách „Skladem“ je dodací lhůta zpravidla dva až čtyři pracovní dny.</p> 
 
    </li> 
 
</ul>

Answer 1

あなたはすべてのh3 span要素を選択しているので問題があります。代わりに、clickイベントハンドラ内のthisキーワードを使用して、DOMトラバーサルを使用して、クリックされたh3に関連するものを見つけることができます。これを試してみてください：

var $plus_minus = $(this).find('span').toggleClass('fa-minus fa-plus'); 
$('h3 span').not($plus_minus).removeClass('fa-minus').addClass('fa-plus'); 

Answer 2

クリックされた要素

$('#content-in > article > div > ul > li > h3').click(function(e) { 
    e.preventDefault(); 
$('h3 span').not($(this).find('span')).removeClass('fa-minus').addClass('fa-plus');//change all classes to fa-plus 
$(this).find('span').toggleClass('fa-minus fa-plus');//change the current one 
}); 

// FAQ 
 
$('ul > li > p').hide(); 
 
$(' ul > li > h3').click(function(e) { 
 
    e.preventDefault(); 
 
    // skrýt všechny spany 
 
    var $this = $(this).parent().find('p'); 
 
    $('ul > li > p').not($this).hide(); 
 
    // rozjetí textu 
 
    $this.toggle("fast", "swing"); 
 

 
    // obarvení pozadí + další změny po kliknutí a rozjetí (u ostatních elementů se tato vlastnost neaplikuje) 
 
    var tittle = $(" ul > li > h3"); 
 
    $(tittle).toggleClass('activeLol'); 
 
    $(tittle).not(this).removeClass('activeLol'); 
 

 
    var $plus_minus = $(' ul > li > h3 > span'); 
 
    $('h3 span').not($(this).find('span')).removeClass('fa-minus').addClass('fa-plus'); //change all classes to fa-plus 
 
    $(this).find('span').toggleClass('fa-minus fa-plus'); //change the current one 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<ul class="Accordion mt30"> 
 
    <li class="Accordion-item"> 
 
    <h3 class="Accordion-item-title" style="text-align: left;"><span class="fa fa-plus"> </span>1. Pokud je vybrané zboží momentálně ve statusu objednáno u dodavatele či vyprodáno, co to znamená ?</h3> 
 
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu objednáno u dodavatele, bohužel není k dispozici. Produkty jsou objednány u našeho italského dodavatele s tím, že čekáme na jejich výrobu a následnou dopravu do České republiky. Dodací lhůta je však různě odlišná, 
 
     zpravidla 2-3 týdny (v některých případech může být delší).</p> 
 
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu vyprodáno, je bohužel dlouhodobě nedostupné s tím, že jeho naskladnění zatím nemáme potvrzeno.</p> 
 
    </li> 
 
    <li class="Accordion-item"> 
 
    <h3 class="Accordion-item-title"><span class="fa fa-plus"> </span>2. Pokud si objednám zboží, které je momentálně skladem, jaká je dodací lhůta ?</h3> 
 
    <p class="Accordion-item-content" style="display: none;">Při objednání produktů, které jsou na našich webových stránkách „Skladem“ je dodací lhůta zpravidla dva až čtyři pracovní dny.</p> 
 
    </li> 
 
</ul>