在按钮标题中显示 URL答案

【问题标题】：Showing URL in the button title在按钮标题中显示 URL
【发布时间】：2015-05-29 07:00:41
【问题描述】：

所以，我有 4 个类别、2 个子类别和两个按钮，如下所示。

https://jsfiddle.net/mboz45fv/15/

所以，这就是我想要实现的目标。

有两个按钮和4个类别按钮，2个子类别按钮。默认情况下，它会显示Button 1 和Button 2。

当点击cat_B 按钮时（图片-A），用户将被引导到.com/cat_B 页面（图片-B）。我想在button 1的标题中显示cat_B，如图所示。

每个类别都有两个子类别。当点击sub_cat_B 时，用户将被重定向到.com/cat_b/sub_cat_b。我希望button 2 在该页面中的标题为sub_cat_B。

我怎样才能做到这一点？

谢谢！

【问题讨论】：

如果.com/cat_B 是一个新页面，那么您就有了一个可以使用的页面。更改新页面上的 HTML。
我当然可以。我只是不想通过一遍又一遍地重复相同的代码来产生冗余。不过还是谢谢。
这就是你想要一个模板系统的地方......那里的选择范围广泛而多样，并且最常处理服务器端。
你会为这种情况推荐一个好的模板系统吗？我从来没有处理过模板系统，所以我不知道从哪里开始。谢谢

标签： javascript jquery

【解决方案1】：

就我个人而言，我会使用已经显示主机页面 URl 的单独按钮来构建每个页面，正如您所描述的那样，我认为这是有原因的。如果您确实想使用 jquery 设置按钮文本，您可以使用：

$("#cat_b").html('.com/cat_b');

如果减少的代码是你所追求的，那么假设你使用的是按钮而不是输入，并且你的按钮结构如下：

<button id="cat_b" class="butt" onclick="location.href='.com/cat_b'">button</button>

您可以使用@rkho 的方法，但直接从按钮自己的 onclick 属性中获取 url，也可以通过类触发它应该减少代码量：

$('.butt').click(function(){
 var link=$(this).attr('onclick');
 var buttonText = link.substr(link.lastIndexOf('/') + 1);
 $("#cat_b").html(buttonText)
 })

【讨论】：

谢谢！我会试试看。我实际上有 30 多个类别，不想重复相同的代码。 =) 谢谢。

【解决方案2】：

我们将首先在窗口中获取 URL。让我们将它存储在一个名为 id 的变量中：

var id = window.location.href

然后，让我们抓住最后一个斜线右侧的所有内容：

var buttonText = id.substr(id.lastIndexOf('/') + 1);

现在，您可以设置特定按钮（假设您已将其标记为“按钮”类）：

$(".button").text(buttonText);

【讨论】：

谢谢。我会试一下！ =)