更改图标onclick jQuery

Question

我想在单击图标时更改图标，我的代码不起作用

$(document).ready(function chevxx(i) {
  if ($("a#a" + i + ".collapsed")) {
    $(this).append("<i class='fa fa-chevron-circle-down'></i>");
  } else {
    $(this).append("<i class='fa fa-chevron-circle-right'></i>");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="a0" data-toggle="collapse" data-parent="#accordion" href="#collapse0" class="collapsed" onclick="chevxx(0)"> </a>

Answer 1

您在错误的位置编写了chevxx函数。另外，即使您已正确编写了jQuery ready函数，也无法从HTML（chevxx）中访问其中声明的任何内容，例如onclick="chevxx(0)"函数，例如$(document).ready(function(){ function chevxx(i){...} }); 函数，因为它是作用域内的。

似乎最好是在尝试编写javascript代码之前先学习javascript基础知识，即使最简单的情况也可能没有基础知识就很棘手。

jQuery ready函数：

const Discord = require("discord.js")
const client = new Discord.Client({disableEveryone: true})
const prefix = "&"

client.on("message", message => {

    if (message.content === prefix + "test") {
        let myembed = new Discord.RichEmbed()
        .setColor("RANDOM")
        .setAuthor("AUTHOR", message.author.avatarURL)
        .setFooter("FOOTER", client.user.avatarURL)
        .setTimestamp(new Date())
        .setTitle("TITLE")
        .addField("FIELD 1", "SUBFIELD 1", true)
        .addField("FIELD 2", "SUBFIELD 2", true)
        message.channel.send(myembed)
    }
})

client.login("token")

---

进一步阅读：

JavaScript Scope and Closures

Answer 2

.c函数无法访问，因为您在其他函数的作用域中声明了该函数，因此在需要的位置看不到它。

如果希望它与chevxx一起使用，则必须将回调函数声明移到全局范围，这意味着将其移到jQuery的onclick=""函数之外。

ready

其他解决方案是在html内摆脱function chevxx(i) {...} $(document).ready(function () {...}) 并将其替换为以编程方式附加事件。

onclick=""

Answer 3

为什么不使用jQuery的click() EventListener方法。

$(document).ready(function(){
  $("#a0").click(function(){
     if ($("a#a0.collapsed")) {
         $(this).append("<i class='fa fa-chevron-circle-down'></i>");
     } 
     else {
         $(this).append("<i class='fa fa-chevron-circle-right'></i>");
     }
  });
});

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

并摆脱onclick = chevxx（0）

Answer 4

您编写chevxx的方式是ready方法回调的一部分。

$(document).ready(function() {

  $('a[data-toggle="collapse"]').bind('click', function() {
    if ($(this).hasClass('collapse')) {
      $(this).find('i').addClass('fa-chevron-circle-down').removeClass('fa-chevron-circle-right');
      $(this).removeClass('collapse');
    } else {
      $(this).addClass('collapse');
      $(this).find('i').addClass('fa-chevron-circle-right').removeClass('fa-chevron-circle-down');
    }
  });

});

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="a0" data-toggle="collapse" data-parent="#accordion" href="#collapse0" class="collapsed"><i class='fa fa-chevron-circle-down'></i></a>

从您的问题中我可以理解您正在使用bootstrap的可折叠功能。为什么不使用bootstraps事件来切换图标。

例如

$('#accordion').on('shown.bs.collapse', function () {
    $(this).find('i').addClass('fa-chevron-circle-right').removeClass('fa-chevron-circle-down');
})
.on('hidden.bs.collapse', function () {
    $(this).find('i').addClass('fa-chevron-circle-down').removeClass('fa-chevron-circle-right');
});

ref：https://getbootstrap.com/docs/3.3/javascript/#collapse-events