Как показать другой div при нажатии на div? - PullRequest
Новая
       1

Как показать другой div при нажатии на div?

1 голос
/ 24 сентября 2019

Добрый день,

Я знаю, что этот вопрос задавался здесь много раз, но все ответы там не работают для моей проблемы.

У меня есть div с именем .title3 .Когда пользователь щелкает его, я хочу, чтобы был показан еще один div с именем .Content3 .Но, к сожалению, это не работает так, как я хочу.

Вот часть моего HTML-кода, где я обнаружил эту проблему: 

<body style="background-color:#171717">

<div class="pseudo3">
     <div class="one3">
          <div class="Content3">
              <p class="close">X</p>
              <form action="order.php">
                <input type="text" value="First & Last Name">
                <input type="email" value="Your e-mail">
                <input type="text" value="Your phone number">
                <textarea>Write your feedback here</textarea>
                <button>Send</button>
              </form>
           </div>
           <div onmouseclick="showDiv()" class="title3">
                FEEDBACK
           </div>
      </div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
  function showDiv() {
    var x = document.getElementsByClassName("title3");
      if ( x.click === true ){
        document.getElementsByClassName("Content3").style.display = "block";
      }
  }
    </script>
</body>

CSS: 

/* The Form Style */

form {
    width: 100%;
    height: 100%;
}

form input {
    width: 100%;
    height: 35px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    padding: 12px;
    border: 0;
    outline: none;
    border-top: 0.15px solid #262323;
    border-left: 0.15px solid #262323;
    border-right: 0.15px solid #262323;
}

form textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    padding: 12px;
    border: 0;
    outline: none;
    border-top: 0.15px solid #262323;
    border-left: 0.15px solid #262323;
    border-right: 0.15px solid #262323;
}

form button {
    width: 100%;
    height: 45px;
    position: relative;
    top: -3px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    border: 0.15px solid #262323;
    outline: none;
    font-size: 20px;
}
input:focus,
textarea:focus,
button:focus{
    background-color: #212020;
    border-top: 0.15px solid #1f1616;
    border-left: 0.15px solid #1f1616;
    border-right: 0.15px solid #1f1616;
}

/* Content3 style */

.Content3 {
    width: 300px;
    height: 350px;
    position: absolute;
    z-index: 2;
    display:none;
}

/* one3 style */

.one3 {
    width: 300px;
    height: 350px;
    transition: 0.3s ease;
    position: relative;
    background-color: #141414;
}

/* pseudo3 style */

.pseudo3 {
    width: 320px;
    padding: 10px;
    border-top: 2px solid #b95e1c;
    border-bottom: 2px solid #ad7145;
    background-image:
        linear-gradient(#b95e1c, #ad7145),
        linear-gradient(#b95e1c, #ad7145);
    background-size: 2px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}

/* title3 style */

.one3 .title3 {
    padding: 30px;
    font-size: 24px;
    color: #8b8b8b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}

/* close style */

.close{
    color: #8b8b8b;
    font-size: 24px;
    position:absolute;
    left:-11px;
    top:-62px;
    z-index:3;
     border-top: 0.5px solid #1f1616;
    border-left: 0.5px solid #1f1616;
    border-right: 0.5px solid #1f1616;
    border-bottom: 0.5px solid #1f1616;
    padding:10px 17px;
    background-color:#212121;
    transition: 0.2s ease-in-out;
}
.close:hover{
    background-color: #8b8b8b;
    color:#212121;
    cursor:pointer;
    transition: 0.2s ease-in-out;
}

JavaScript: 


function showDiv() {
  var x = document.getElementsByClassName("title3");
      if ( x.click === true ){
        document.getElementsByClassName("Content3").style.display = "block";
      }
}

Нет сообщений об ошибках, но когда я нажимаю на свой .title3 div, он не показывает div с классом .Content3

Ответы [ 3 ]

1 голос
/ 24 сентября 2019

У вас много проблем в вашем коде.Я постараюсь охватить большинство из них

  1. Вы используете onmouseclick.Это не допустимое событие JavaScript.Используйте onclick.

  2. Вы пытаетесь присвоить переменной x элемент HTML с классом title3.Вот 2 проблемы:

    2.1.Вам не нужно присваивать элемент, который вы только что щелкнули, переменной внутри функции click.У вас уже есть этот элемент с event.target

    2.2.Используя getElementsByClassName, вы получаете HTML-коллекцию, а не один элемент.(см. слово «Элементы» во множественном числе). Вы можете получить его, используя querySelector или добавив к нему идентификатор и используя getElementById (см. единственный элемент).Но опять же, вам не нужно извлекать это так.Вы можете использовать event.target.Как вы нажмете на нее.

  3. if ( x.click === true ){.Зачем вам нужно проверять, щелкает ли элемент, когда вся функция вызывается только при нажатии на этот элемент?Избыточная проверка и не правильная.

  4. и здесь.См. Пункт 2.2

  5. не называйте ваши атрибуты HTML заглавными буквами.используйте content3

  6. Не импортируйте jquery, поскольку он вам не нужен.

Проверьте код ниже 

function showDiv() {
  document.querySelector(".Content3").style.display = "block";
}
.Content3 {
  display:none
  }
<div class="pseudo3">
  <div class="one3">
    <div class="Content3">
      <p class="close">X</p>
      <form action="order.php">
        <input type="text" value="First & Last Name">
        <input type="email" value="Your e-mail">
        <input type="text" value="Your phone number">
        <textarea>Write your feedback here</textarea>
        <button>Send</button>
      </form>
    </div>
    <div onclick="showDiv()" class="title3">
      FEEDBACK
    </div>
  </div>
</div>

Полезные ссылки:

0 голосов
/ 24 сентября 2019

Можете ли вы использовать data свойство для этой темы. 

<div class="titles">
    <button data-id="1">open 1</button>
    <button data-id="2">open 2</button>
    <button data-id="3">open 3</button>
</div>
<div class="contents">
    <p data-id="1">context</p>
    <p data-id="2">context</p>
    <p data-id="3">context</p>
</div>

Когда нажата любая кнопка, возьмите data-id и сделайте что-нибудь внутри содержимого div с data-id.Если вы не можете понять, я могу отправить любой пример для этого.

0 голосов
/ 24 сентября 2019

Вам не нужен jQuery для этого, вы также можете удалить свой onmouseover и использовать только это: 

<script>
//add listener for click on your .title3
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
   //prevent default action if any (dont need that in this case, but useful, if .title3 would be <a> tag)
   e.preventDefault(); 
   //set style
   document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...