如何使用j Query將字體Awesome plus更改為minus

Question

我有一個加號字體真棒圖標我想在用戶點擊加號時將其更改為減號，反之亦然

我在我的HTML表中使用它來擴展一些行

 $('i').click(function() { $(this).find('i').toggleClass('fas fa-plus fas fa-minus'); }); 

 .icon { color: green; cursor: pointer; margin-right: 6px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i> 

Answer 1

你幾乎就在那里，但你的選擇器是不正確的（你可以在事件處理程序中使用$(this)來引用被點擊的元素）：

 $('i').click(function() { $(this).toggleClass('fa-plus fa-minus'); var color = ($(this).hasClass('fa-minus')) ? 'red' : 'green'; $(this).css('color', color); }); 

 .icon { color: green; cursor: pointer; margin-right: 6px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i> 

Answer 2

不需要使用find $this代表i ，並切換多個pal類來改變class和形狀，如下所示。

 $('i').click(function() { $(this).toggleClass('fa-plus green fa-minus red'); }); 

 .icon { color: green; cursor: pointer; margin-right: 6px; } .green{ color: green; } .red{ color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i> 

Answer 3

你必須刪除find（），它將是有效的。

 $('i').click(function() { $(this).toggleClass('fa-plus fa-minus'); $(this).hasClass('fa-minus')? $(this).css('color','red'): $(this).css('color','green'); }); 

 .icon { color: green; cursor: pointer; margin-right: 6px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>