【问题标题】：Make the minus/plus sign toggle only on the clicked button...?仅在单击的按钮上进行减号/加号切换...？
【发布时间】：2017-02-03 03:14:57
【问题描述】：

如何仅在单击的按钮上切换减号/加号？我怎样才能使它可点击（现在不行）...

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/

【问题讨论】：

您对 2 个按钮使用相同的 ID，为每个按钮分配一个唯一的 ID。然后，将按钮的引用作为参数传递给toggleSign，只修改传递的那个。
我无法添加不同的 ID... 这与我将用于按钮的代码相同（部分）。谢谢！ :)
那么这不是一个有效的 HTML，不同的元素必须有不同的 id。您应该为此使用一个类。
如果您无法添加不同的 ID，那么您将无法使其按预期工作。很简单。

标签： javascript targeting

【解决方案1】：

像这样改变这两个函数：

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

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

并尝试为元素使用不同的 id 值。两个 div 有 id="myDropdown"。

【讨论】：

【解决方案2】：

您为什么不简化一些事情并使用 css 添加 + 而不是 jQuery？

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

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

然后您可以在.dropbtn 上切换open 类

$(".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") 并更改了所有符号。

【讨论】：

【解决方案3】：

在每个按钮上添加一个独特的id，如下所示：

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

然后使用该 id 指定要更改的按钮

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

在您的 toggleSigns 函数中，使用 id 选择按钮

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

更新小提琴：jsfiddle

【讨论】：

【解决方案4】：

正如 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/

e：用真正的小提琴更新：/

【讨论】：