javascript - 如何用正确的数据填充 anchor onclick

Question

我正在遍历从中获取值的输入，并希望将其用于

这是输入的html

<div class="follow-inputs text-center">
   <div class="input-group my-2">
      <div class="input-group-prepend">
         <span class="input-group-text" id="basic-addon1">
           <i class="fab fa-facebook"></i>
         </span>
      </div>
      <input id="facebook" class="form-control follow-url-inputs" name="facebook" data-com.agilebits.onepassword.user-edited="yes">
   </div><br>
   <div class="input-group my-2">
     <div class="input-group-prepend">
       <span class="input-group-text" id="basic-addon1">
         <i class="fab fa-linkedin"></i>
       </span>
     </div>
     <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" data-com.agilebits.onepassword.user-edited="yes">
    </div><br>
    <div class="input-group my-2">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">
          <i class="fab fa-twitter"></i>
        </span>
      </div>
      <input id="twitter" class="form-control follow-url-inputs" name="twitter" data-com.agilebits.onepassword.user-edited="yes">
    </div>
    <br>
 </div>

像这样将其分配给 anchor onclick 事件:

$('.follow-url-inputs').each(function(index, item){
    console.log(index, $(item).val(), $('#socialShare a', index));
    $('#socialShare a').attr("onclick", "window.open('" + $(item).val() + "')");
})

这是社交分享栏的 html:

<div class="socialShare" data-top1="150" data-top2="20" data-margin="0">
   <span id="socialShare" style="position: fixed; z-index: 9999; background: rgb(255, 255, 255); padding: 5px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px; margin-left: 0px; top: 20px;">
     <a rel="nofollow" class="shareBtns" href="#" id="fs_facebook-btn" data-count="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false" title="Share on Facebook" target="_self"></a>
     <a rel="nofollow" class="shareBtns" href="#" id="fs_linkedin-btn" data-count="linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F&amp;title=BetterAddThis%20-%20Gratis%20social%20share%20buttons', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=600, height=400, toolbar=0, status=0');return false" title="Share on Linkedin" target="_self"></a>
     <a rel="nofollow" class="shareBtns" href="#" id="fs_twitter-btn" data-count="twitter" onclick="window.open('https://twitter.com/intent/tweet?text=BetterAddThis%20-%20Gratis%20social%20share%20buttons&amp;url=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false" title="Share on Twitter" ;="" target="_self"></a>
   </span>
</div>

但它会用最后一个 $(item).val() 值填充所有 #socialShare a。我怎样才能用正确的数据而不是最后一个填充打开的 anchor 窗口？

Answer 1

正如我在评论中提到的，问题是您当前针对所有 anchor 并在每次通过循环时替换值，因此您最终得到所有 anchor 相同的值(循环中的最后一个值)

要使用您当前的 html 结构解决此问题:

您可以使用 .eq() 并将索引传递给它，因为您的 anchor 与输入匹配

如果检查结果，您会看到 onclick 已更改。如果您为输入设置一个值，它应该更改为这些值(加载时)。我为第一个输入添加了 test 值，为 anchor 添加了 1、2 和 3，这样更容易看到

https://api.jquery.com/eq/

如果您的 anchor 标记与输入的顺序不同，您可以使用数据属性来定位相应的 anchor

$('.follow-url-inputs').each(function(index, item) {
  $('#socialShare a').eq(index).attr("onclick", "window.open('" + $(item).val() + "')");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follow-inputs text-center">
  <div class="input-group my-2">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">
           <i class="fab fa-facebook"></i>
         </span>
    </div>
    <input id="facebook" class="form-control follow-url-inputs" name="facebook" data-com.agilebits.onepassword.user-edited="yes" value="test">
  </div><br>
  <div class="input-group my-2">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">
         <i class="fab fa-linkedin"></i>
       </span>
    </div>
    <input id="linkedin" class="form-control follow-url-inputs" name="linkedin" data-com.agilebits.onepassword.user-edited="yes">
  </div><br>
  <div class="input-group my-2">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">
          <i class="fab fa-twitter"></i>
        </span>
    </div>
    <input id="twitter" class="form-control follow-url-inputs" name="twitter" data-com.agilebits.onepassword.user-edited="yes">
  </div>
  <br>
</div>

<div class="socialShare" data-top1="150" data-top2="20" data-margin="0">
  <span id="socialShare" style="position: fixed; z-index: 9999; background: rgb(255, 255, 255); padding: 5px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px; margin-left: 0px; top: 20px;">
     <a rel="nofollow" class="shareBtns" href="#" id="fs_facebook-btn" data-count="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false" title="Share on Facebook" target="_self">1</a>
     <a rel="nofollow" class="shareBtns" href="#" id="fs_linkedin-btn" data-count="linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F&amp;title=BetterAddThis%20-%20Gratis%20social%20share%20buttons', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=600, height=400, toolbar=0, status=0');return false" title="Share on Linkedin" target="_self">2</a>
     <a rel="nofollow" class="shareBtns" href="#" id="fs_twitter-btn" data-count="twitter" onclick="window.open('https://twitter.com/intent/tweet?text=BetterAddThis%20-%20Gratis%20social%20share%20buttons&amp;url=http%3A%2F%2Fsharebtns.fingerspitz.nl.ebox%2F', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false" title="Share on Twitter" ;="" target="_self">3</a>
   </span>
</div>