Форум

lordenas · #1 (**permalink**) 29.03.2018, 16:13

Здравствуйте, помогите пожалуйста разобраться со следующим кодом.
Смысл таков. При замене "описания 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);
 
    });
});    
});

рони · #2 (**permalink**) 29.03.2018, 17:00

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

lordenas · #3 (**permalink**) 29.03.2018, 17:11

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

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

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

рони · #4 (**permalink**) 29.03.2018, 17:28

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

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

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

рони · #5 (**permalink**) 29.03.2018, 17:29

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>

lordenas · #6 (**permalink**) 29.03.2018, 17:37

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

Dilettante_Pro · #7 (**permalink**) 29.03.2018, 17:53

lordenas,

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

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

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

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

Форум

Справочник

Discord чат

Курсы javascript