【问题标题】:jQuery: disabling an anchor and creating a new one with the same hrefjQuery:禁用锚并创建一个具有相同href的新锚
【发布时间】:2016-08-31 12:34:37
【问题描述】:

我正在使用 Wordpress 插件将 Facebook 事件加载到网页中。有一个带有事件 div 的大锚。我希望在每个 fb-event div 的底部都有一个小锚点。

我需要:

禁用第一个锚而不移除它(移除它也会移除整个 div)。

在 fb-event div 的底部创建一个新的锚点。

将 href 从第一个锚点传递到第二个锚点。

我觉得我很接近但什么也没发生,这是我的代码,首先是 html,然后是 jQuery。提前致谢!

<div class='fb-event'>
<a class="fb-event-anchor" href="http://www.facebook.com/event.php?eid=1165884803462190"  target="_blank">
<div class="fb-event-desc"><img src=https://scontent.xx.fbcdn.net/t31.0-8/s720x720/13920278_1335410149821833_1686522516711277604_o.jpg />
<div class='fb-event-title'>Spiritueel weekend - Een stapje verder</div>
<div class='fb-event-time'>10 september 2016 &#183; 10:00 -<br>11 september 2016 &#183; 17:00</div>
<div class='fb-event-location'>Balance in Life</div>
<div class='fb-event-description'>Lots
</div>
</div>
</a>
</div>

jQuery:

var fblink = $('.fb-event-anchor').attr('href');

$('.fb-event-anchor').click(function(){
                  return false; // prevents default action
});
$('.fb-event-description').append('<a class="fb-event-anchor-new" href="' . [fblink] . '"></a>');

【问题讨论】:

    标签: php jquery html wordpress anchor


    【解决方案1】:

    试试下面的代码

    $(function () {
        $('.fb-event-anchor').on("click", function (e) {
            e.preventDefault();
        });
    
    var fblink = $('.fb-event-anchor').attr("href");
        $( ".fb-event" ).append( '<a class="fb-event-anchor-new" href='+ fblink +'>NEW LINK</a>' );
    });
    

    【讨论】:

      【解决方案2】:

      你想这样做吗?

      var fblink = $('.fb-event-anchor').attr('href');
      
          $('.fb-event-anchor').click(function () {
              return false; // prevents default action
          });
          $('.fb-event-description').append('<a class="fb-event-anchor-new" href="'+fblink+'">fbanchor</a>');
      

      【讨论】:

        【解决方案3】:

        两种解决方案都成功创建了一个新链接,但都没有使第一个链接无法点击。我用 css 反驳了最后一部分:

        .fb-event-anchor {
           pointer-events: none;
           cursor: default;
        }
        

        谢谢两位,Pratik 是第一个,所以我会接受他的回答。

        【讨论】:

          猜你喜欢
          • 2019-03-07
          • 1970-01-01
          • 2023-03-31
          • 1970-01-01
          • 1970-01-01
          • 2012-12-26
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多