Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2018, 16:13
Интересующийся
Отправить личное сообщение для lordenas Посмотреть профиль Найти все сообщения от lordenas
 
Регистрация: 08.11.2015
Сообщений: 14

Помощь с заменой текста и циклами.
Здравствуйте, помогите пожалуйста разобраться со следующим кодом.
Смысл таков. При замене "описания 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, 29.03.2018 в 17:18.
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2018, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

lordenas,
меняйте алгоритм, не назначайте в клике никаких обработчиков, если нет желания убить браузер.
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2018, 17:11
Интересующийся
Отправить личное сообщение для lordenas Посмотреть профиль Найти все сообщения от lordenas
 
Регистрация: 08.11.2015
Сообщений: 14

Сообщение от рони Посмотреть сообщение
lordenas,
меняйте алгоритм, не назначайте в клике никаких обработчиков, если нет желания убить браузер.
К сожалению других вариантов нет... HTML не поддается редактированию. Могу подгрузить только свой JS код.
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2018, 17:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от lordenas
HTML не поддается редактированию.
это тут причём??? речь о $('#viewing_panel').on('click', + $('.valuetext').on('focusout'
Ответить с цитированием
  #5 (permalink)  
Старый 29.03.2018, 17:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 29.03.2018, 17:37
Интересующийся
Отправить личное сообщение для lordenas Посмотреть профиль Найти все сообщения от lordenas
 
Регистрация: 08.11.2015
Сообщений: 14

Спасибо тебе огромнейшее! Я голову уже голову сломал. Учится, учится и еще раз учится...
Ответить с цитированием
  #7 (permalink)  
Старый 29.03.2018, 17:53
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обрезка текста до и после нужной фразы с последующей заменой kovalenko3331 Общие вопросы Javascript 17 17.09.2019 16:41
Как с помощью скрипта высчитать ширину полосы прокрутки? LADYX Элементы интерфейса 35 13.11.2017 12:50
Помощь в появлении текста Slandewi Элементы интерфейса 2 09.01.2017 17:30
Нужна помощь с заменой элемент (hardcore) Solovei95 Общие вопросы Javascript 1 29.02.2012 11:49
Цитирование текста в комментариях. Требуется помощь. shinjuku Общие вопросы Javascript 3 07.07.2008 14:19