jQuery replaceWith () - повторное использование удаленных значений - PullRequest
Новая
       19

jQuery replaceWith () - повторное использование удаленных значений

0 голосов
/ 14 мая 2018

Я использую 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.

1 Ответ

0 голосов
/ 14 мая 2018

Вам просто нужно получить возвращаемое значение функции replaceWith, чтобы вы могли использовать его позже.

Например: 

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

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;
}
<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>
...