使用javascript href链接追加一次

我知道以前只发布过一次关于如何追加的帖子，但我的情况有点独特，因为我试图从href链接调用该函数。我将代码发布在JSFIDLE上，但由于某些原因它无法工作。我的网站上的代码也是一样。有人能帮我完成这项工作吗？这样，单击href链接将只向

#services

div添加一个给定字符串一次。每次我点击链接时，我实际站点上的代码都会一次又一次地添加“详细信息”，但我只希望它这样做一次

<div id="services">SERVICES</div>
<a href="javascript:moreDetails();">More Details</a>

服务

var-details='只是一些额外的细节；
函数moretails（）{
$（“#服务”）。附加（详情）；
}

我会像这样使用：

var details = '<p>Just some additional details</p>';
$('a').one('click',function () {
    $('#services').append(details);
})

var-details='只是一些额外的细节；
$（'a'）.one（'click'，函数（）{
$（“#服务”）。附加（详情）；
})

---

我强烈建议您采用基于数据属性的方法来添加此类行为。否则你会得到一大堆意大利面代码。我最近准备了一个关于我喜欢叫什么的小报告

假设对于您的情况，使用切换按钮显示/隐藏细节也可以，您可以通过几行简单的代码添加这样的可重用行为：

  $('[data-toggle-show]').each(function() {
    var $element = $(this),
        $target = $($element.data('toggleShow'));

    $target.hide();

    $element.on('click', function() {
      $target.toggle();
    });
  });

然后，您可以使用数据属性在标记中的任何位置使用此功能：

<p>Welcome to the article. Do you want to read more?</p>
<button data-toggle-show="#article-more">read more</button>
<p id="article-more">Here you go! Some more to read...</p>

欢迎阅读本文。你想读更多吗

阅读更多
给你！还有一些要读

您可以查看

另外，在我看来，这种行为的正确HTML语义是使用按钮而不是链接。我以前也用过一个链接，直到我读到一个关于在哪里使用链接和在哪里使用按钮的有趣辩论。实际上，底线是应该使用一个链接，用户可以右键单击该URL为书签，并且应该使用一个按钮，您也可以决定禁用执行该行为的可能性。

只需执行以下操作：

<div id="services">SERVICES</div>
<a href="javascript:moreDetails(this);">More Details</a>
var details = '<p>Just some additional details</p>';
function moreDetails(obj){
        obj.setAttribute("href", "")
        $('#services').append(details);
}

服务
var details='只是一些额外的细节；
功能详细信息（obj）{
obj.setAttribute（“href”，“”）
$（“#服务”）。附加（详情）；
}

一个更新的JSFIDLE显示了问题：（该函数是在一个

onload

处理程序中定义的，因此在外部不工作）太棒了，它正在工作！非常感谢。我还是一个JS新手，我不确定如何将.one（）与href链接结合使用。我想我不需要像以前那样给JS打电话了。

<div id="services">SERVICES</div>
<a href="javascript:moreDetails(this);">More Details</a>
var details = '<p>Just some additional details</p>';
function moreDetails(obj){
        obj.setAttribute("href", "")
        $('#services').append(details);
}