仅更改在多个具有相同名称的类之间单击的类的样式答案

【问题标题】：Only change style of class clicked between multiple classes have same name仅更改在多个具有相同名称的类之间单击的类的样式
【发布时间】：2018-05-16 01:24:59
【问题描述】：

我有许多具有相同类的图标，我想更改我单击的图标的样式。我将一个display 设置为none，另一个是inline 作为默认设置，当我点击它时，它将被保留。但它影响到所有图标具有相同的类名。

$(document).ready(function(){
    $(".fa-calendar-plus-o, .fa-check").click(function(){
      $('.fa-calendar-plus-o').css({"display":"none"});
      $('.fa-check').css({"display":"inline"});
    });
  });

我尝试使用$(this).css({"display":"none"});，但我不知道如何为每个人定义this。

【问题讨论】：

能否提供html
试试这个：$(document).ready(function(){ $(".fa-calendar-plus-o, .fa-check").click(function(){ $(this ).css({"display":"none"}); $('.fa-check').css({"display":"inline"}); }); });

标签： jquery css class onclick styles

【解决方案1】：

由于您已经从一个隐藏开始，因此使用 toggleClass 非常容易完成。只需将 .hidden 类应用于最初隐藏的类，然后您就可以使用稍微修改过的代码版本进行切换：

CSS：

.hidden {
display:none;
}

jQuery:

$(document).ready(function(){
    $(".fa-calendar-plus-o, .fa-check").click(function(){
    $(this).filter('.fa-calendar-plus-o').toggleClass("hidden")
    $(this).filter('.fa-check').toggleClass("hidden")
    })
  });

【讨论】：

【解决方案2】：

使用.filter()的方法

$(document).ready(function(){
   $(".fa-calendar-plus-o, .fa-check").click(function(){
     $(this).filter('.fa-calendar-plus-o').css({"display":"none"});
     $(this).filter('.fa-check').css({"display":"inline"});
   });
});

【讨论】：

【解决方案3】：

你需要隐藏你点击的那个，并在它旁边显示隐藏的那个？

（这里我假设fa-calendar-plus-o 在fa-check 之前，如果不是，您只需交换next 和prev）

$(document).ready(function() {
  $(".fa-calendar-plus-o").click(function() {
    $(this).css({
      "display": "none"
    });
    $(this).next('.fa-check').css({
      "display": "inline"
    });
  });
  $(".fa-check").click(function() {
    $(this).css({
      "display": "none"
    });
    $(this).prev('.fa-calendar-plus-o').css({
      "display": "inline"
    });
  });
});

.fa-check {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="fa-calendar-plus-o">Im fa-calendar-plus-o1</span>
<span class="fa-check">Im fa-check1</span>
<br>
<span class="fa-calendar-plus-o">Im fa-calendar-plus-o2</span>
<span class="fa-check">Im fa-check2</span>
<br>
<span class="fa-calendar-plus-o">Im fa-calendar-plus-o3</span>
<span class="fa-check">Im fa-check3</span>
<br>
<span class="fa-calendar-plus-o">Im fa-calendar-plus-o4</span>
<span class="fa-check">Im fa-check4</span>

【讨论】：