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>

将其分配给锚点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>

但是它将最后一个#socialShare a值填充到所有$(item).val()中。如何用正确的数据而不是仅最后一个填充打开的锚窗口？

Answer 1

正如我在评论中提到的，问题是您当前针对所有锚点，并且每次循环时都替换该值，因此最终所有锚点都具有相同的值（循环中的最后一个值）

要使用当前的html结构解决此问题，请执行以下操作：

您可以使用.eq()并为其传递索引，因为您的锚点与输入匹配

如果检查结果，将看到onclick已更改。如果将值设置为输入，则应更改为这些值（加载时）。我在第一个输入中添加了一个test值，并为锚点添加了1、2和3，因此更容易看到

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>

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

1 个答案: