使用类

Question

我正在尝试编写javascript代码，以便在元素用户点击后更改第一个div的css显示属性，该类具有类toggle-placement。 我的代码使用循环创建页面。循环每次生成这段代码：

<h3 class="placementName" onclick="showPlacement()" title="<?php echo $placement->getId() ?>"> Placement: <?php echo $placement->getName() ?></h3>
<div class="toggle-placement">

使用toggle-placement初始化的display:none，我希望在点击其上方的<h3>后显示每个div。 如何才能在标题之后获得div并更改其CSS？ THX

Answer 1

如果您想使用jQuery，@ haim770，请提供最佳答案：

$('h3.placementName').click(
   function() { 
      $(this).next('.toggle-placement').show(); 
   }
)

但是用css我不认为这是可能的。你必须使用jquery来寻找你想要的东西。

可能对你有帮助。

Answer 2

您最简单的方法是使用jQuery：

$('.placementName').click( // when you click on a '.placementName' class element.
    function() {
        $(this).next('.toggle-placement').show(); // show() == display:block;
});

你有next（）的选择器的文档在这里=＆gt; https://api.jquery.com/next/

只是编辑：

使用jQuery：

$('.placementName').

比以下更快：

$('h3.placementName').

如果您在＆lt;上使用“placementName”类h3＆gt; element，你可以使用“$（'。placementName'）。”performance test =＆gt; http://jsperf.com/jquery-selector-test

Answer 3

如果您执行以下操作，那就更容易了：

在CSS中创建一个名为hide的类：

.hide{
  display:none;
}

然后在您的Javascript中执行以下操作：

$('.placementName').on('click', function() {
    $(this).next('.toggle-placement').toggleClass('hide'); 
});