Question

我想在单击href时将元素h2.title a上的a.fb属性复制到元素a.share。

但是，每个人都有一个a.share。

如果我单击第一个a.share，则#LINK1将复制到a.fb。

如果我单击第二个a.share，#LINK2也将复制到a.fb，并删除href上属性a.share上的现有值。

对不起，英语不好：（

感谢我的帮助

<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

Answer 1

我建议：

// retrieving the the elements matching the 'a.share' CSS selector:
$('a.share')
  // using the on() method to bind the anonymous function as the
  // 'click' event-handler:
  .on('click', function(event) {
    // preventing the default behaviour of the clicked <a> element:
    event.preventDefault();

    // caching the clicked <a> element:
    let clicked = $(this);

    // retrieving the elements matching the supplied CSS selector,
    // this could be simplified depending on the presence of other
    // 'a.fb' elements that you wish, or don't wish, to affect with
    // the same functionality:
    $('div.sharewpopup a.fb')
      // here we update the 'href' attribute of the found element(s),
      // using the .attr() method:
      .attr('href',
        // we update it to the result of the next expression; here
        // find the closest (ancestor) '.post' element:
        clicked.closest('.post')
        // from there we find the descendant elements that match
        // the supplied 'h2 > a' CSS selector:
        .find('h2 > a')
        // and retrieve the 'href' attribute-value of the first
        // element in the returned correction, using the .attr()
        // method as the getter:
        .attr('href'));
});

$('a.share').on('click', function(event) {
  event.preventDefault();
  let clicked = $(this);
  $('div.sharewpopup a.fb').attr('href', clicked.closest('.post').find('h2 > a').attr('href'));
});

a.fb::after {
  content: ' (' attr(href) ')';
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

使用纯JavaScript也可以很容易地做到这一点：

// defining a named function to handle the copying of attribute,
// this takes one argument - an Event object, provided automagically
// by the EventTarget.addEventListener() method (later):
const hrefToShare = (event) => {

  // again, we prevent the default action of the clicked <a> element:
  event.preventDefault();

  // here we find, and cache, the first (if any) 'a.fb' element
  // that matches the supplied CSS selector:
  let shareLink = document.querySelector('div.sharewpopup a.fb'),

    // we cache the clicked <a> element, via the 'target'
    // property of the Event object:
    clicked = event.target,

    // here navigate from the clicked <a> to the
    toShare = clicked
      // closest (ancestor) element matching the '.post' CSS
      // selector:
      .closest('.post')
      // from that element we find the first descendant element
      // using Element.querySelector that matches the supplied
      // CSS selector:
      .querySelector('h2 > a');

  // then we update the href property (not the attribute) of the
  // shareLink element (the a.fb) to be equal to the href property
  // (not the attribute) of the toShare ('LINK1','LINK2') element:
  shareLink.href = toShare.href
}

// here we retrieve a nodeList of the elements that match the
// 'a.share' CSS selector:
let shareLinks = document.querySelectorAll('a.share');

// here we iterate over those found nodes, and use an Arrow function
// to add an event-listener to each in turn, supplying the named
// hrefToShare() function (note the deliberate lack of parentheses)
// as the event-handler for the 'click' event:
shareLinks.forEach(

  // the 'share' argument is a reference to the current Node
  // of the NodeList over which we're iterating:
  (share) => share.addEventListener('click', hrefToShare)
);

const hrefToShare = (event) => {
  event.preventDefault();
  let shareLink = document.querySelector('div.sharewpopup a.fb'),
    clicked = event.target,
    toShare = clicked
    .closest('.post')
    .querySelector('h2 > a');
  shareLink.href = toShare.getAttribute('href');
}

let shareLinks = document.querySelectorAll('a.share');

shareLinks.forEach(
  (share) => share.addEventListener('click', hrefToShare)
);

a.fb::after {
  content: ' (' attr(href) ')';
}

<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

上面我使用了以下JavaScript行：

shareLink.href = toShare.href

这是将一个href元素的<a> 属性复制到另一个元素，相反，我可以使用：

shareLink.setAttribute('href', toShare.getAttribute('href'));

或：

shareLink.setAttribute('href', toShare.href);

这两行结果大致相同，并将更新href属性正确，前一行将复制href 属性，第二行将复制href元素中的toShare 属性。这些方法中的任何一个都将导致链接正常工作（只要toShare链接有效且不依赖于随后的JavaScript操作）。

（可能）不起作用的是：

shareLink.href = toShare.getAttribute('href');

原因是href属性可以是用户尝试链接时浏览器解析的相对URL，而href属性是绝对URL（从相对URL派生），在href属性中找到的根相对或绝对URL）。因此，href属性是或应该是绝对URL。

参考文献：

JavaScript：
jQuery：
- attr()。
- closest()。
- event.preventDefault()。
- on()。

Answer 2

在单击共享链接时，找到其.post包装器，然后在其中找到h2，然后转到h2内部的链接。现在，从该链接中获取href，并将其添加到.fb链接中。

var $fbLink = $('.sharewpopup .fb');

$('.share').on('click', function(e) {
  e.preventDefault();
  var $linkToShare = $(this).closest('.post').find('.title a');
  $fbLink.attr('href', $linkToShare.attr('href'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='sharewpopup'>
  <a class='fb'>Share to Facebook</a>
</div>

<!--POST 1-->
<div class='post'>
  <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
  <a class='share' href='#'>Share</a>
</div>

<!--POST 2-->
<div class='post'>
  <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
  <a class='share' href='#'>Share</a>
</div>

Answer 3

两种方式

使用eq 当您想复制给第一个用户时

$("a.share").eq(0).attr("href", $(h2.title a).eq(0).attr("href"))

然后是第二个：

$("a.share").eq(1).attr("href", $(h2.title a).eq(1).attr("href"))

或仅使用prev，因为.share和h2在同一框中：

$("a.share").attr("href", this.prev('h2').find("a").attr("href"))

this是绑定a.share

时单击envent

Answer 4

您可能不需要jQuery。普通的JS就足够了。

如果您使用的是html代码，则每次调用shareMe时，每个a.share previousElementSibling都是最接近的h2.title。

其中的a元素将包含要复制的 href 。

  <div class='sharewpopup'>
    <a class='fb'>Share to Facebook</a>
  </div>

  <!--POST 1-->
  <div class='post'>
    <h2 class='title'><a href='#LINK1'>POST TITLE 1</a></h2>
    <a class='share' onclick="javascript:shareMe(this);" href='#'>Share</a>
  </div>

  <!--POST 2-->
  <div class='post'>
    <h2 class='title'><a href='#LINK2'>POST TITLE 2</a></h2>
    <a class='share' onclick="javascript:shareMe(this);" href='#'>Share</a>
  </div>

  <script>
    function shareMe(aElem) {
      var dest = aElem.previousElementSibling.querySelector('a').href;
      document.querySelector('.sharewpopup a').href = dest;
      return false;
    }
  </script>

如何将attibute href复制到另一个“ a”元素[JQUERY]

4 个答案: