jQuery / Как определить следующий элемент с классом XY и изменить его отображение на «true», используя функцию щелчка? - PullRequest
Новая
       2

jQuery / Как определить следующий элемент с классом XY и изменить его отображение на «true», используя функцию щелчка?

0 голосов
/ 09 ноября 2019

В настоящее время я работаю над страницей вики и хотел бы добиться следующего:

У меня есть два div, завернутые в оболочку. Первый будет контейнером для ключевого слова, а второй будет контейнером для описания ключевого слова. По умолчанию второй скрыт и должен появляться, когда пользователь нажимает на ключевое слово. Я пытался настроить javascript, но ничего не происходит, когда я нажимаю ключевое слово div.

Какие-нибудь решения для этого?

Заранее большое спасибо! 

$(".Keyword").click(function() {
  $(".Keyword").next(".Content").attr("display: true;");
});
.listWrapper {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Keyword {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  padding-bottom: 5px;
}

.Keyword:hover {
  cursor: pointer;
}

.Content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="listWrapper">

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

</div>

</body>

</html>

Ответы [ 3 ]

2 голосов
/ 09 ноября 2019

Вы хотите изменить css на (.css('display', 'block')) или (.toggle()) на . Content, который находится рядом с нажатием .Keyword ($(this)): 

$(".Keyword").click(function() {
  $(this).next(".Content").toggle();
});
.listWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Keyword {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  padding-bottom: 5px;
}

.Keyword:hover {
  cursor: pointer;
}

.Content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="listWrapper">

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

</div>

</body>

</html>
1 голос
/ 09 ноября 2019

Несколько ошибок в вашем javascript:

  • используйте $(this) вместо $(".Keyword") для ссылки на выбранный элемент, а не все элементы .Keyword
  • display: true недопустимо, вам нужно использовать display: block
  • .attr("display: true;") недопустимо, вы меняете CSS, а не атрибуты, поэтому используйте .css('display', 'block') или лучше .show() или.toggle()
$(".Keyword").click(function() {
  $(this).next(".Content").show();
});
1 голос
/ 09 ноября 2019

Вы также можете использовать toggle (). Показать, если элемент скрыт. Скрыть, если элемент виден 

$(".Keyword").click(function() {
  $(this).next(".Content").toggle();
});
.listWrapper {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Keyword {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  padding-bottom: 5px;
}

.Keyword:hover {
  cursor: pointer;
}

.Content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="listWrapper">

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Click me to show my content</div>
    <div class="Content">This is the content for Key1</div>
  </div>

</div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...