代码之家 › 专栏 › 技术社区 › Sireini

如何用正确的数据填充锚点onclick

jquery javascript

Sireini · 技术社区 · 6 年前

我正在循环输入,从中获取值并希望使用它

这是输入的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>

将其分配给锚定onclick事件,如下所示:

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

这是socialshare栏的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>

但它充满了所有 #socialShare a 与最后 $(item).val() 价值。如何用正确的数据而不是最后一个数据填充打开的锚定窗口?

1 回复 | 直到 6 年前

Huangism 6 年前

.eq()

test

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

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