Question

我知道之前已经发布过如何仅追加一次，但我的情况有点独特，因为我试图从href链接调用该函数。我在jsfiddle上发布了我的代码，但由于某种原因它没有工作。我网站上的代码相同。有人可以帮助我实现这一点，以便单击href链接只会将给定字符串附加到#services div一次。我实际网站上的代码附加了＆＃34;详细信息＆＃34;每次点击链接时都会反复重复，但我只想让它做一次。

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

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

http://jsfiddle.net/7g59yb5r/1/

Answer 1

我使用.one()并执行以下操作：

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

<强> jsFiddle example

Answer 2

我强烈建议您遵循基于数据属性的方法来添加此类行为。否则你最终会得到一大堆意大利面条代码。我最近准备了一个关于我想称之为data driven behavior的小型演讲。

假设对于您的情况，使用切换按钮显示/隐藏详细信息也可以，您可以使用几行简单的代码添加此类可重复使用的行为：

  $('[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>

您可以查看example on jsbin

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

Answer 3

简单地说：

<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);
}

使用javascript href链接追加一次

3 个答案: