Сброс состояния .one возможно или нет?

Иван Глазков · February 13, 2019

Всем привет.

Захотел вникнуть в JS параллельно делая небольшой проект.

В общем надо сделать так чтобы при нажатии на #input появлялся div #downmenu, потом при клике в любое место этот div исчезал но при клике на сам div пока что ничего не происходило. В общем я сделал появление div и исчезновение но как заставить это работать постоянно не могу понять потому что .one запускается только один раз. Может кто нибудь подскажет более красивое решение.

Вот код.

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<link type="text/css" rel="stylesheet" href="reset.css"></link>
		<style>
			#field {
				margin-left: 20px;
				margin-top: 20px;
				width: 200px;
			}
		</style>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<!-- <script type="text/javascript" src="java-test.js"></script> -->
		<script type="text/javascript" src="java.js"></script>
	</head>
	<body>
		<form id="mainform">
			<input id="field" type="text" placeholder="aaaa"></input>
			</blockquote>
		</form>
	</body>
</html>

$(document).ready(function ($) {
  // При нажатии на input появляется div 'downmenu'
  $('#field').one('keypress', function(event) {
    $('#mainform').after($('<div/>', {
      id: 'downmenu',
    }));
    $('#downmenu')
      .css({
        border: '1px solid black',
        height: '200px',
        width: $('#field').width() + 2,
        marginLeft: '20px',
        backgroundColor: '#2F58F3',
      });
  });

  // При нажатии на любое место кроме div, div ищечзает.
  $(function($) {
    $(document).mouseup(function(event) {
      var div = $(`#downmenu`);
      if (!div.is(event.target) && div.has(event.target).length === 0) {
        div.remove();
      };
    });
  });
});

Спасибо.

klierik · February 13, 2019

Здравствуйте.

Скорей всего потому что Вы не прячете а удаляете <div> строкой:

div.remove();

Иван Глазков · February 13, 2019

Здравствуйте.

Спасибо что ответили.

Поменял

div.remove();

на

div.hide();

div остаётся в коде но заново не появляется при вводе текста в input.

Корректно будет сделать div спрятанным с самого начала, а потом его просто показывать при надобности или есть более эффективное решение?

Edited February 13, 2019 by Иван Глазков

klierik · February 13, 2019

Попробуйте так

$('#field').one('keypress', function (event) {

    var divID = "downmenu";

    if (!$("#" + divID).length) {
        $('#mainform').after($('<div/>', {
            id: divID,
        }));
    } else {
        $("#" + divID).show()
    }

    $('#downmenu').css(
        {
            border: '1px solid black',
            height: '200px',
            width: $('#field').width() + 2,
            marginLeft: '20px',
            backgroundColor: '#2F58F3',
        }
    );
    
});

Иван Глазков · February 13, 2019

спасибо за помощь. в итоге получилось вот так.

$(document).ready(function ($) {
  // При нажатии на input появляется div 'downmenu'
  $('#field').keypress(function(event) {

    var divID = "downmenu";

    if (!$("#" + divID).length) {
      $("#mainform").after($('<div/>', {
        id: divID,
      }));
      $("#" + divID).css({
        border: '1px solid black',
        height: '200px',
        width: $('#field').width() + 2,
        marginLeft: '20px',
        backgroundColor: '#2F58F3',
      });
    } else {
      $("#" + divID).show();
    }
  });

  // При нажатии на любое место кроме div, div ищечзает.
  $(function($) {
    $(document).mouseup(function(event) {
      var div = $(`#downmenu`);
      if (!div.is(event.target) && div.has(event.target).length === 0) {
        div.hide();
      };
    });
  });
});

Конечно не идеал. Div не появляется при удалении текста из input и div исчезает при нажатии мышкой на input, такого быть не должно но результат близко к желаемому.

Спасибо.

Edited February 13, 2019 by Иван Глазков

Sign In

Сброс состояния .one возможно или нет?

Question

Иван Глазков

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Иван Глазков

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Иван Глазков

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information