Javascript-форум - Помощь с заменой текста и циклами.

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Помощь с заменой текста и циклами. (https://javascript.ru/forum/jquery/73214-pomoshh-s-zamenojj-teksta-i-ciklami.html)

Помощь с заменой текста и циклами.

Здравствуйте, помогите пожалуйста разобраться со следующим кодом.
Смысл таков. При замене "описания 1" должно меняться описание 2-1.

При нажатии на карандаш, все работает почти хорошо. Но при втором редактировании, также заменяется и первый отредактированный элемент...

<div id="viewing_panel">
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 1</p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 2</p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 3 </p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 4</p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 5</p>
		</div>
	</div>

	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 2-1</p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 2-2</p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 2-3 </p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 2-4</p>
		</div>
	</div>
	<div class="field field-slider">
		<div class="field-title">
			<p>Описание 2-5</p>
		</div>
	</div>
</div>

$(document).ready(function(){
var $col = $('.field-slider p');
for (var i = 0; i<5; i++) {    
$('.field-slider p:eq('+i+')').css({"float":"left"}); 
$('.field-slider p:eq('+i+')').after('<div style="height: 20px;"><img class="newtitle" style="width: 13px;margin: 5px 10px 0 10px; cursor: pointer;float: left;" src="https://png.icons8.com/metro/50/000000/pencil.png"><input class="valuetext" style="margin: 0 0 0 29px; border: 1px solid #d5d5d5; width: 200px; border-radius: 3px; display: none;" type="text"></div>');
}
$('#viewing_panel').on('click','.newtitle', function () {
	$(this).next().css({"display":"block"});
	var $elem = $(this).parent().parent();
	var $numelem = $('#viewing_panel').find('.field-title p').parent().index($elem);
	console.log($numelem);
	
    $('.valuetext').on('focusout', function(){
	var $clac = $numelem+5;
        $newtext = $(this).val();
        $(this).parent().prev().html($newtext);
        $(this).css({"display":"none"});
		console.log($clac);
		$('.field-title p:eq('+$clac+')').html($newtext);
 
    });
});    
});

lordenas,
меняйте алгоритм, не назначайте в клике никаких обработчиков, если нет желания убить браузер.

Цитата:

Сообщение от рони (Сообщение 481810)

lordenas,
меняйте алгоритм, не назначайте в клике никаких обработчиков, если нет желания убить браузер.

К сожалению других вариантов нет... HTML не поддается редактированию. Могу подгрузить только свой JS код.

Цитата:

Сообщение от lordenas

HTML не поддается редактированию.

это тут причём??? речь о $('#viewing_panel').on('click', + $('.valuetext').on('focusout'

lordenas,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var $col = $(".field-slider p");
    for (var i = 0; i < 5; i++) {
        $(".field-slider p:eq(" + i + ")").css({
            "float": "left"
        });
        $(".field-slider p:eq(" + i + ")").after('<div style="height: 20px;"><img class="newtitle" style="width: 13px;margin: 5px 10px 0 10px; cursor: pointer;float: left;" src="https://png.icons8.com/metro/50/000000/pencil.png"><input class="valuetext" style="margin: 0 0 0 29px; border: 1px solid #d5d5d5; width: 200px; border-radius: 3px; display: none;" type="text"></div>');
    }
    $("#viewing_panel").on("click", ".newtitle", function() {
        $(".valuetext").hide();
        $(this).next().stop().show();
    }).on("focusout", ".valuetext", function() {
        var index = $(".valuetext").hide().index(this) + 5,
            $newtext = $(this).val();
        $(this).parent().prev().html($newtext);
        $col.eq(index).html($newtext);
    });
});
  </script>
</head>

<body>
<div id="viewing_panel">
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 1</p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 2</p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 3 </p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 4</p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 5</p>
    </div>
  </div>

  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 2-1</p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 2-2</p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 2-3 </p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 2-4</p>
    </div>
  </div>
  <div class="field field-slider">
    <div class="field-title">
      <p>Описание 2-5</p>
    </div>
  </div>
</div>

</body>
</html>

Спасибо тебе огромнейшее! Я голову уже голову сломал. Учится, учится и еще раз учится...:victory:

lordenas,

Цитата:

Сообщение от lordenas

Учится, учится и еще раз учится

И это правильно.
Учиться, учиться и еще раз учиться

Русский - тоже язык, хоть и не программирования