Question

这可能是一个简单的问题，但我无法弄清楚：我正在尝试使用JavaScript / jQuery将href更改为变量。我正在使用Bootstrap Collapse Plugin。我的代码基本上是这样的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Collapsible Panel</h2>
  <p>Click on the collapsible panel to open and close it.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</div>

但是面板是动态创建的，在某些时候，我必须更改id和hrefs。例如：

<a href="#8d70b67c-c667-4fe3-a936-cdd0fc2a1f36">...</a>

到

<a href="#361cd655-ad54-4cd5-aeb7-a3da9553c1e9">...</a>

如果我使用Javascript

var link = newId();
//newId is part of the plugin, but is based on the previous href
element.href = "#" + link;

html变为

<a href="#localhost:1234/#361cd655-ad54-4cd5-aeb7-a3da9553c1e9">...</a>

（这是页面的完整地址，带有锚点）

，它不再起作用。但是像这样硬编码会起作用：

element.href = "#361cd655-ad54-4cd5-aeb7-a3da9553c1e9";

我已经尝试了很多事情，但是我总是得到相似的结果。

Answer 1

我认为您的newId函数存在一些问题。您需要这样的东西：

btn.addEventListener("click", () =>
  Array.from(
    document.querySelectorAll('a'),
    a => a.href = "#" + newId())
)

function newId () {
  return Math.random().toString(36); // simple random string.
};

<a href="361cd655-ad54-4cd5-aeb7-a3da9553c1e9">...</a>
<button id="btn">Change!</button>

Answer 2

我可以发现newId（）最有可能涉及先前的href属性，因为如果要使用锚元素：

START RequestId: 0fa5225f-a54f-11e8-85a9-83174efb4714 Version: $LATEST
2018-08-21T14:32:41.855Z    0fa5225f-a54f-11e8-85a9-83174efb4714    end request to
END RequestId: 0fa5225f-a54f-11e8-85a9-83174efb4714
REPORT RequestId: 0fa5225f-a54f-11e8-85a9-83174efb4714

即使是相对网址，代码

<a href='page'></a>

将返回完整的URL（例如https://serveradmin.xyz/page）

一个可能的解决方案是，在更改当前href时，也可以将变量设置为新值，而不是获取当前href。例如：

document.getElementsByTagName("a")[0].href

或者，您可以执行以下操作：

var linkHref = 1;
document.getElementsByTagName("a")[0].href = linkHref;
//when you next want to change it, don't get the current href, instead, use the link variable
linkHref++;
document.getElementsByTagName("a")[0].href = linkHref;

如果href参数为https://stackoverflow.com/posts/51951100/edit#test，则它将返回#test。

更改href以将其锚定在同一页面上

2 个答案: