Question

我正在使用jQuery来为键盘用户重复删除相同的链接。我仍然希望鼠标用户能够点击“更多”链接，如果他们想要，所以我将链接重新悬停。

我所做的就是工作，但它看起来像是一个偏执狂。我在Jquery api中读到replaceWith（）返回被替换的值，但它保存在哪里？如何在需要时取回它们？

我明白原始值会进入某种数组。看起来应该可以在第一个函数中创建一个命名数组，然后在第二个函数中访问它的正确值。阵列和放大器我真的很糟糕欢迎任何帮助。

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://stackoverflow.com">Stack Overflow</a>
			<time>14 May 2018</time>
			<span class="index-excerpt">Answers questions</span>
			<a href="https://stackoverflow.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

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

例如：

dupeA

然后

$(this).children( 'span.more-link' ).replaceWith( replaced );将成为已替换的dopeA元素的引用。所以稍后你可以简单地做：

replaced

重新开始replaced。

您将了解变量的范围，以便能够在您需要的地方使用replaceWith。在您的示例中，您需要将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; }功能的更多信息here。

希望它有所帮助！

修改我已将该功能应用于您的案例，并进行了微小的改进。

＆＃13;
＆＃13;
<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://stackoverflow.com">Stack Overflow</a> <time>14 May 2018</time> <span class="index-excerpt">Answers questions</span> <a href="https://stackoverflow.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>
＆＃13;
{{1}}
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

jQuery replaceWith（） - 重新使用删除的值

1 个答案: