Сделать знак минус/плюс переключением только на нажатой кнопке ...?

Question

Как я могу переключить знак минус/плюс только на нажатой кнопке? Как я могу сделать это интерактивными (это не прямо сейчас) ...

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

Добавить уникальный id на каждом из вашей кнопки, как это:

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

Затем используйте этот идентификатор, чтобы указать, какую кнопку изменить

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

На вашей toggleSigns функции использовать идентификатор, чтобы выбрать кнопку

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

Изменено скрипку: jsfiddle

Answer 2

Как сказал Veve, вы используете класс, чтобы сделать вашу пуговицу. Однако, если вы пройдете this (щелчок элемента), вы можете настроить таргетинг на используемую кнопку.

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

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

обновлена ​​скрипку: https://jsfiddle.net/jf1zetLw/7/

е: обновлена ​​с реальным скрипку:/

Answer 3

Изменить эти две функции, как это:

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

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

И пытаются использовать различные значения идентификаторов для элементов , У двух div есть id = "myDropdown".

Answer 4

Почему вы не упрощаете вещи и не используете css для добавления + вместо jQuery?

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

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

Тогда вы можете просто переключить open класс на .dropbtn

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

См раздвоенный jsFiddle: [Link] (https://jsfiddle.net/e1x10ae6/)

Для того, чтобы ответить, почему это было изменение знака +/- на обеих кнопках вы дали один и тот же класс обоим пролетам: $(".dropbtn").append('<span class="adl-signs">+</span>'); Затем в функции toggleSigns вы выбрали все экземпляры этого класса (.adl-signs), когда вы использовали следующий селектор $(".adl-signs") и изменил знак на всех.