切换活动类以更改字体真棒图标

时间：2017-02-03 11:36:48

标签： javascript jquery html css

我有一个仪表板，我放置了font-awesome图标。我想在点击仪表板项目时在加号和减号之间切换。但是当我尝试这样做时，即使我点击其他仪表板项目，第一项也会被切换。

＆＃13;
＆＃13; 
$(".dropdown").click(function() {
  /*$(".dropdown").removeClass("active");
  $(this).addClass("active");*/

  if ($('#plusMinus').hasClass('fa-plus-square')) {
    $('#plusMinus').hasClass('fa-plus-square')
    $('#plusMinus').removeClass('fa-plus-square');
    $('#plusMinus').addClass('fa-minus-square');
  } else {
    $('#plusMinus').removeClass('fa-minus-square');
    $('#plusMinus').addClass('fa-plus-square');

  }
});
＆＃13; 
.dropdown-toggle::after {
  display: none;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-10 col-md-3 col-lg-3 col-sm-6">
        <div class="dashBoard animated slideInLeft">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 1<span><i class="fa fa-plus-square" id="plusMinus" aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>

            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 2<span><i id="plusMinus" class="fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>

            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Module 3<span><i id="plusMinus" class="fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

您正在使用id来选择图标。 HTML id应该在页面中是唯一的（more info），当您尝试使用jQuery选择它们时，您总是得到它遇到的第一个（请参阅jQuery ID selector docs）

要解决您的问题，请使用jQuery's .find method从单击的元素开始选择图标，而不是整个文档，并使用class es代替id s：

＆＃13;
＆＃13; 
$(".dropdown").click(function() {
    var button = $(this).find('.plusMinus');

  if (button.hasClass('fa-plus-square')) {
    button.removeClass('fa-plus-square');
   button.addClass('fa-minus-square');
  } else {
    button.removeClass('fa-minus-square');
    button.addClass('fa-plus-square');

  }
});
＆＃13; 
.dropdown-toggle::after {
  display: none;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-10 col-md-3 col-lg-3 col-sm-6">
        <div class="dashBoard animated slideInLeft">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 1<span><i class="plusMinus fa fa-plus-square" aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>

            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 2<span><i class="plusMinus fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>

            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Module 3<span><i class="plusMinus fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

问题在于，在您的控件中，您使用了常见的ID，并且ID不能超过一个，因此JQuery始终是第一个元素。如果你想获得点击的元素，你必须使用this，看看这个例子：

＆＃13;
＆＃13; 
$(".dropdown").click(function() {
  /*$(".dropdown").removeClass("active");
  $(this).addClass("active");*/

  if ($(this).find("#plusMinus").hasClass('fa-plus-square')) {
    $(this).find("#plusMinus").hasClass('fa-plus-square')
    $(this).find("#plusMinus").removeClass('fa-plus-square');
    $(this).find("#plusMinus").addClass('fa-minus-square');
  } else {
    $(this).find("#plusMinus").removeClass('fa-minus-square');
    $(this).find("#plusMinus").addClass('fa-plus-square');

  }
});
＆＃13; 
.dropdown-toggle::after {
  display: none;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-10 col-md-3 col-lg-3 col-sm-6">
        <div class="dashBoard animated slideInLeft">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 1<span><i class="fa fa-plus-square" id="plusMinus" aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>

            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 2<span><i id="plusMinus" class="fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>

            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Module 3<span><i id="plusMinus" class="fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

HTML中的标识符必须是唯一的您的HTML无效。我建议添加一个公共类，即plusMinus，然后使用它。

您需要定位当前元素中的元素，即this上下文，并使用$.fn.find()作为当前元素的后代，并使用$.fn.toggleClass() 

$(".dropdown").click(function() {
    $(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square');
});

HTML 的

<i class="plusMinus fa fa-plus-square" aria-hidden="true"></i>

＆＃13;
＆＃13; 
$(".dropdown").click(function() {
  $(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square');
});
＆＃13; 
.dropdown-toggle::after {
  display: none;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-10 col-md-3 col-lg-3 col-sm-6">
        <div class="dashBoard animated slideInLeft">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 1<span><i class="plusMinus fa fa-plus-square"  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>

            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Module 2<span><i class="plusMinus fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>

            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Module 3<span><i class="plusMinus fa fa-plus-square "  aria-hidden="true"></i></span>
                            </a>

              <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a>  <a class="dropdown-item" href="#">Another action</a>  <a class="dropdown-item" href="#">Something else here</a> 
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题