使用javascript href链接追加一次

I know it has been posted before on how to append only once, but my situation is a little unique because I'm attempting to call the function from an href link. I have my code posted on jsfiddle, but it's not working for some reason. The same code on my site works. Can someone help me get this working so that clicking the href link will append a given string to the #services div only one time. The code thats on my actual site appends the "details" over and over again every time I click the link, but I only want it to do it once.

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

<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/

3 个解决方案

#1

I'd use .one() and do it like:

我使用.one()并像这样做:

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

jsFiddle example

#2

I'd strongly recommend you to follow a data attribute based approach for adding such kind of behavior. Otherwise you'll end up with a huge pile of spaghetti code. I recently prepared a small presentation about what I like to call data driven behavior.

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

Assuming that for your case it would also be fine to show / hide the details with a toggle button you could add such re-usable behavior with a few simple lines of code:

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

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

    $target.hide();

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

Then you can use this functionality anywhere in your markup using a data attribute:

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

<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>

You can view the example on jsbin

您可以在jsbin上查看示例

Also, in my opinion, the correct HTML semantics for such behavior is to use a button instead of a link. I've also used a link in the past until I read an interesting debate on where to use a link and where to use a button. Actually the bottom line is that a link should be used where a user can right click to bookmark the URL and a button should be used where you could also decide to disable the possibility to execute the behavior.

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

#3

Simply do:

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

#1