Question

我正在尝试使用自定义HTML和JS为joomla创建一个“模块”。我有4个div，每个div都有一些信息。当我点击其中一个时，我点击的div信息必须出现... 问题是，我怎么做让它出现;只有我点击的div的信息......（？）这是代码：

HTML

<div class="datos-lunares">
    <div id="nueva" class="luna nueva">
        <h2>Luna nueva</h2>
        <div id="nueva-datos" class="datos close">
            <p>Ideal para cosecha de raíz.</p>
            <p>Retira las hojas y botones florales marchitos y secos.</p>
            <p>Rotura los sustratos consiguiendo suelos más aireados y sueltos.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
            <p>Desmaleza tu huerta eliminando las malas hierbas.</p>
        </div>
    </div>

    <div id="menguante" class="luna menguante">
        <h2>Cuarto menguante</h2>
        <div id="datos-menguante" class="datos close">
            <p>Si tienes cultivos cuyos frutos son comestibles, recoléctalos,también es el período más propicio para recoger hortalizas de hoja.</p>
            <p>Aumenta la cantidad de agua en el riego.</p>
            <p>Trasplanta los cultivos que lo requieran.</p>
            <p>Si utilizas fertilizantes líquidos, aplícalos en esta etapa.</p>
        </div>
    </div>

    <div id="creciente" class="luna creciente">
        <h2>Cuarto creciente</h2>
        <div id="datos-creciente" class="datos close">
            <p>Este período se considera propicio para sembrar y repicar las plantas cuyas partes comestibles están por encima de la tierra y dan frutos, como tomates,pimientos, guisantes, judías...</p>
            <p>Aplica fertilizantes y abonos con previo laboreo del suelo.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
        </div>
    </div>

    <div id="llena" class="luna llena">
        <h2>Luna llena</h2>
        <div id="datos-llena" class="datos close">
            <p>Siembra los vegetales cuya parte comestible crece bajo la tierra (zanahoria, patata, cebolla, etc).</p>
            <p>Abona los cultivos con estiércol y restos de materia vegetal.</p>
            <p>Aplica insecticidas orgánicos, esta fase es la más oportuna para controlar las plagas.</p>
            <p>Riega sin mojar las yemas y botones florales.</p>
            <p>Se sugiere realizar los injertos,trasplantes y podas.</p>
        </div>
    </div>
</div>

JQuery的

jQuery(document).ready(function() {
    jQuery(this, ".luna").click(function() {
        if (jQuery(".datos").hasClass("close")) {
            jQuery(".datos").show("slow");
            jQuery(".datos").removeClass("close");
            jQuery(".datos").addClass("open");
        } else {
            jQuery(".datos").hide("slow");
            jQuery(".datos").removeClass("open");
            jQuery(".datos").addClass("close");
        }

    });
});

Answer 1

使用jQuery(this)与您实际所在的对象进行互动。
然后，find班级'datos'
最后，做你需要的......

类似的东西：

jQuery(document).ready(function() {

    jQuery(".luna").on('click', function() {

        var $datos = jQuery(this).find(".datos");

        if ($datos.hasClass("close")) {

            $datos.show("slow").removeClass("close").addClass("open");

        } else {

            $datos.hide("slow").removeClass("open").addClass("close");

        }

    });

});

请参阅代码段示例：

＆＃13;

jQuery(document).ready(function() {

        jQuery(".luna").click(function() {

            var $datos = jQuery(this).find(".datos");

            if ($datos.hasClass("close")) {

                $datos.show("slow").removeClass("close").addClass("open");

            } else {

                $datos.hide("slow").removeClass("open").addClass("close");

            }

        });

    });

＆＃13;

.luna h2 {
  color: red
}
.datos {
  display: none
}
.datos.open {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="datos-lunares">
    <div id="nueva" class="luna nueva">
        <h2>Luna nueva</h2>
        <div id="nueva-datos" class="datos close">
            <p>Ideal para cosecha de raíz.</p>
            <p>Retira las hojas y botones florales marchitos y secos.</p>
            <p>Rotura los sustratos consiguiendo suelos más aireados y sueltos.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
            <p>Desmaleza tu huerta eliminando las malas hierbas.</p>
        </div>
    </div>

    <div id="menguante" class="luna menguante">
        <h2>Cuarto menguante</h2>
        <div id="datos-menguante" class="datos close">
            <p>Si tienes cultivos cuyos frutos son comestibles, recoléctalos,también es el período más propicio para recoger hortalizas de hoja.</p>
            <p>Aumenta la cantidad de agua en el riego.</p>
            <p>Trasplanta los cultivos que lo requieran.</p>
            <p>Si utilizas fertilizantes líquidos, aplícalos en esta etapa.</p>
        </div>
    </div>

    <div id="creciente" class="luna creciente">
        <h2>Cuarto creciente</h2>
        <div id="datos-creciente" class="datos close">
            <p>Este período se considera propicio para sembrar y repicar las plantas cuyas partes comestibles están por encima de la tierra y dan frutos, como tomates,pimientos, guisantes, judías...</p>
            <p>Aplica fertilizantes y abonos con previo laboreo del suelo.</p>
            <p>Disminuye la cantidad de agua en el riego.</p>
        </div>
    </div>

    <div id="llena" class="luna llena">
        <h2>Luna llena</h2>
        <div id="datos-llena" class="datos close">
            <p>Siembra los vegetales cuya parte comestible crece bajo la tierra (zanahoria, patata, cebolla, etc).</p>
            <p>Abona los cultivos con estiércol y restos de materia vegetal.</p>
            <p>Aplica insecticidas orgánicos, esta fase es la más oportuna para controlar las plagas.</p>
            <p>Riega sin mojar las yemas y botones florales.</p>
            <p>Se sugiere realizar los injertos,trasplantes y podas.</p>
        </div>
    </div>
</div>

＆＃13;

编辑（澄清）：

我没有意识到你在this事件的分配上使用了click ... ...实际上，可以将第二个参数传递给构造函数，以避免find ()函数，但必须在嵌套对象而不是容器中使用它。

实施例

jQuery(".luna").on('click', function() {
    if (jQuery(".datos", this).hasClass("close")) { /*...*/ });
});

Answer 2

我认为你想要一种像手风琴一样的东西：

$('.luna > h2').on('click', function(){

    $(this).next('.datos').slideToggle();
    //Or
    $(this).next('.datos').toggleClass('close open');

});

Demo

您还可以查看jQuery UI Accordion

<强>更新

要在单击其中一个div时关闭所有其他div，您可以执行以下操作：

var next = $(this).next('.datos');
$('.datos').not(next).each(function(){
    $(this).slideUp();
});
next.slideToggle();

Demo

Answer 3

请使用

$(this).find( "div" ).show("slow");

显示div。

Answer 4

我看到它的方式，你缺少CSS来定义信息块在具有类close和open时应该显示的方式，除非你有一些CSS链接到你还没有提到的文件。

所以你最终会在CSS文件中找到类似的东西：

.close
{
    display: none;
}

.open
{
    display: block;
}

或者更具体一点，避免与close/open类的页面上的其他元素发生潜在冲突：

.datos.close
{
    display: none;
}

.datos.open
{
    display: block;
}

打开一个孩子div，点击父母的一个

4 个答案:

编辑（澄清）：