Faire basculer le signe moins/plus uniquement sur le bouton cliqué ...?

Question

Comment puis-je faire basculer le signe moins/plus uniquement sur le bouton cliqué? Comment puis-je faire cliquable (ce n'est pas en ce moment) ...

JAVASCRIPT

$(".dropbtn").append('<span class="adl-signs">+</span>'); 

function ctaDropMenu(e) { 
    e.target.nextElementSibling.classList.toggle("show"); 
} 

function toggleSigns() { 
    $(".adl-signs").html(function(_, html) { 
    return $.trim(html) == '+' ? '-' : '+'; 
    }); 
} 

$(".dropbtn").click(function(e) { 
    ctaDropMenu(e) 
    toggleSigns() 
}); 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

https://jsfiddle.net/neuhaus3000/jf1zetLw/4/

Answer 1

Ajouter un id unique sur chacun de votre bouton comme ceci:

<button id="1" class="dropbtn">Click Me</button>

Ensuite, utilisez cet identifiant pour specfify qui bouton pour changer

$(".dropbtn").click(function(e) { 
    var btn_id = $(this).attr('id'); //get button id 
    ctaDropMenu(e) 
    toggleSigns(btn_id) 
}); 

Sur votre fonction toggleSigns utiliser l'identifiant pour sélectionner le bouton

function toggleSigns(id) { 
    $("#"+id+" .adl-signs").html(function(_, html) { 
     return $.trim(html) == '+' ? '-' : '+'; 
    }); 
} 

violon Mise à jour: jsfiddle

Answer 2

Comme l'a dit Veve, vous utilisez la classe pour faire votre bascule. Cependant, si vous passez this (l'élément sur lequel vous cliquez), vous pouvez cibler le bouton utilisé.

function toggleSigns(element) { 
    $(element).find('.adl-signs').html(function(_, html) { 
    return $.trim(html) == '+' ? '-' : '+'; 
    }); 
} 

$(".dropbtn").click(function(e) { 
    ctaDropMenu(e) 
    toggleSigns(this) 
}); 

violon mise à jour: https://jsfiddle.net/jf1zetLw/7/

e: mis à jour avec violon réel:/

Answer 3

Changer ces deux fonctions comme celle-ci:

function toggleSigns(e) { 
    $(e.target).find(".adl-signs").html(function(_, html) { 
    return $.trim(html).slice(-1) == '+' ? '-' : '+'; 
    }); 
} 

$(".dropbtn").click(function(e) { 
    ctaDropMenu(e) 
    toggleSigns(e) 
}); 

et essayez d'utiliser des valeurs différentes id pour les éléments . Deux div ont id = "myDropdown".

Answer 4

Pourquoi ne pas simplifier les choses et utiliser les CSS pour ajouter le + au lieu de jQuery?

.dropbtn:after{ 
    content: '+'; 
} 

.dropbtn.open:after{ 
    content: '-'; 
} 

Ensuite, vous pouvez simplement passer la classe open sur .dropbtn

$(".dropbtn").click(function(e) { 
    e.target.classList.toggle("open"); 
    e.target.nextElementSibling.classList.toggle("show"); 
}); 

Voir la jsFiddle fourchue: [Lien] (https://jsfiddle.net/e1x10ae6/)

Pour répondre pourquoi il changeait le signe +/- sur les deux boutons, vous avez donné la même classe aux deux travées: $(".dropbtn").append('<span class="adl-signs">+</span>'); Ensuite, dans la fonction toggleSigns, vous avez sélectionné toutes les instances de cette classe (.adl-signs) lorsque vous avez utilisé le sélecteur suivant $(".adl-signs") et a changé le signe sur tous.