Javascript 如何才能拥有在jQuery终端中执行命令的链接

发布于04月18日

我正在try 拥有一些链接来执行命令.

例如:

function showMenu(consoleObj) {
consoleObj.echo("\t[[!;;]about]      learn more about whatever");
...

我希望"关于"文本为clickable并执行about函数，而不是转到外部链接.

供参考，我有anyLinks: true个，在这里:

$('.terminal').terminal({
anyLinks: true,
menu: function() {
    showMenu(this);
},
...

只是想让你知道，我是一个超级菜鸟.谢谢！

我试过了:

consoleObj.echo("\t[[!;#fff;;#about]about]      learn more about whatever");

以及:

consoleObj.echo("\t[[!;#fff;;about]about]      learn more about whatever");

以及:

consoleObj.echo("\t[[!;#fff;;!about]about]      learn more about whatever");

什么也不起作用(他们都把我带到了一个/关于页面，而不是执行命令).

推荐答案

您可以通过将类添加到格式并添加将执行您的命令的单击事件来实现这一点.向网址添加哈希不会给您任何东西，除非您handle hashChange event.

另请注意:格式中的第4个参数是添加到元素中的类.

const consoleObj = $('body').terminal({
  about() {
    this.echo('this is about');
  },
  hello() {
    this.echo('this is hello');
  }
});

consoleObj.echo("\t[[!;#fff;;command]about]      learn more about whatever");
consoleObj.echo("\t[[!;#fff;;command]hello]      greeting");

consoleObj.on('click', '.command', function() {
  const command = $(this).text();
  consoleObj.exec(command);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet"/>

EDIT:链接中的哈希似乎不起作用(即使正确操作)，因为target="_blank"在新选项卡中打开链接，并且无法覆盖它.这是将来可以修复的事情.

我创建了一个问题:Allow to change link target attribute

EDIT2刚刚意识到可以通过以下方式删除目标属性:

term.echo('[[!;;;;#about;{}]Hello World]');

Javascript 如何才能拥有在jQuery终端中执行命令的链接

推荐答案

Javascript相关问答推荐

如何在JavaScript中通过一次单击即可举办多个活动

如何通过在提交时工作的函数显示dom元素？

Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做？

docx.js：如何在客户端使用文档修补程序

微软Edge编辑和重新发送未显示""

扫描qr code后出错whatter—web.js

康威的生活游戏规则在我的Javascript版本中不起作用.''我做错了什么？

未捕获错误：[]：getActivePinia()被调用，但没有活动Pinia.🍍""在调用app.use(pinia)之前，您是否try 使用store ？""

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

类构造函数不能在没有用With Router包装的情况下调用

为什么这个.add.group({})在教程中运行得很好，但在我的游戏中就不行了？

Nextjs 13.4 Next-Auth 4.2登录(&Quot；凭据&，{})；不工作

Phaserjs-创建带有层纹理的精灵层以自定义外观

为什么延迟在我的laravel项目中不起作用？

P5.js中的分形树

在Java脚本中构建接口的对象

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

Plotly.js栏为x轴栏添加辅助文本

当达到高度限制时，如何裁剪图像？使用html和css

我如何才能让p5.js在不使用实例模式的情况下工作？