jQuery replaceWith() - 重新使用删除的值

Question

我正在使用 jQuery 为键盘用户删除靠在一起的相同 link。我仍然希望鼠标用户能够根据需要单击 'more' link，因此我将 link 重新悬停。

我所做的是有效的，但似乎有点废话。我在 Jquery api 中读到 replaceWith() returns 被替换的值，但是它把它们保存在哪里？我怎样才能在需要时取回它们？

我知道原始值进入某种数组。看起来应该可以在第一个函数中创建一个命名数组，然后在第二个函数中访问它的正确值。我对数组真的很不好，欢迎任何帮助。

jQuery(function ($) {

// dedupe links in post list widgets

     $( ".widget li" ).each(function( i ) {
   var firstA = $(this).children( 'a:first-child' );
   var myH = $( firstA ).attr( 'href' );
   var dupeA = $( firstA ).siblings( 'a' );
   var dupeH = $( dupeA ).attr( 'href' );
   if( dupeH == myH ) { 
    $( dupeA ).replaceWith( '<span class="more-link">Open</span>' );
   }
    });
 
// replace link if needed

  $( '.widget li' ).hover(function( i ) {
   var myH = $(this).children( 'a:first-child' ).attr( 'href' );
   $(this).children( 'span.more-link' ).replaceWith( '<a href="' + myH + '" class="more-link">Open</a>' ).addClass( 'hover' );
  });
   
});

ul {
    list-style-type: none;
}
li, li > * {
    float: left;
    clear: left;
    display: block;
}
li {
    padding-bottom: 1em;
}
li a:first-child ~ * {
    padding-left: 1em;
}
.more-link {
    border: 1px solid red;
    padding: .3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="widget">
 <ul class="index-widget">
  <li>
   <a href="https://whosebug.com">Stack Overflow</a>
   <time>14 May 2018</time>
   <span class="index-excerpt">Answers questions</span>
   <a href="https://whosebug.com" class="more-link">Open</a>
  </li>
  <li>
   <a href="https://jquery.com">jQuery</a> 
   <time>15 May 2018</time>
   <span class="index-excerpt">Prompts questions</span>
   <a href="https://jquery.com" class="more-link">Open</a>
  </li>
 </ul>
</div>
</body>

进一步编辑：现在在此处编写代码。谢谢，zer00ne。

Answer 1

您只需要获取 replaceWith 函数的返回值，以便稍后重用它。

例如：

var replaced = $( dupeA ).replaceWith( '<span class="more-link">Open</span>' );

replaced 将成为对替换的 dupeA 元素的引用。所以稍后你可以简单地做：

$(this).children( 'span.more-link' ).replaceWith( replaced );

重新启用 dopeA。

您将了解变量的范围，以便能够在您需要的地方使用 replaced。在您的示例中，您需要将 replaced 定义为全局变量或在绑定两个事件函数（主执行函数）的范围内定义。

有关 replaceWith 函数的更多信息，请参见 here。

希望对您有所帮助！

编辑我已将该功能应用到您的案例中，并稍作改进。

jQuery(function ($) {
 $('.widget li').each(function(i, e) {
  var firstA = $(this).children('a:first-child');
  var myH = $(firstA).attr('href');
  var dupeA = $(firstA).siblings('a');
  var dupeH = $(dupeA).attr('href');
  var replaced = false; // Set a variable to check if the item has been replaced
  var repA; // Stored the replaced item
  if(dupeH == myH) {
      // Replaces the item and stores the item in a variable
   repA = $(dupeA).replaceWith($('<span class="more-link">Open [replaced]</span>'));
      // Only if replaced, the mouseneter event is set
   $(e).mouseenter(function() {
        // If the element has not been replaced yet
    if(replaced === false) {
     // Sets the element as replaced
          replaced = true;
          // Put back the replaced element
     $(this).children('span.more-link').replaceWith(repA.addClass('hover'));
    }
   });
  }
    });
});

ul {
    list-style-type: none;
}
li, li > * {
    float: left;
    clear: left;
    display: block;
}
li {
    padding-bottom: 1em;
}
li a:first-child ~ * {
    padding-left: 1em;
}
.more-link {
    border: 1px solid red;
    padding: .3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="widget">
 <ul class="index-widget">
  <li>
   <a href="https://whosebug.com">Stack Overflow</a>
   <time>14 May 2018</time>
   <span class="index-excerpt">Answers questions</span>
   <a href="https://whosebug.com" class="more-link">Open</a>
  </li>
  <li>
   <a href="https://jquery.com">jQuery</a> 
   <time>15 May 2018</time>
   <span class="index-excerpt">Prompts questions</span>
   <a href="https://jquery.com" class="more-link">Open</a>
  </li>
 </ul>
</div>
</body>

jQuery replaceWith() - 重新使用删除的值

jQuery replaceWith() - re-using the removed values

arrays

jquery

href

replacewith