jQuery - 引用同一对象的另一个类

jQuery - refer to another class of the same object

本文关键字：另一个 对象 引用 jQuery      更新时间：2023-09-26

这是我的情况：

我有一个网站将涵盖 4 个不同的主题。我从 4 个div 开始，每个div 都有这些主题的标题。例如

<div><p> Physics   </p></div>
<div><p> Chemistry </p></div>
<div><p> Biology   </p></div>
<div><p> Math      </p></div>

当我点击"物理"div时，我希望出现另一个div，详细说明一些物理问题或其他东西。再次单击会导致"详细说明div"消失。我在这里处理了一个"主题"：

http://jsfiddle.net/yfrNn/2/

这是我用来完成此操作的jQuery代码。 

$(document).ready(function () {
    $(".phys").click(function () {
        if ($(".phys:last").css("visibility") == "visible") {
            $(".phys").css("visibility", "");
        } else {
            $(".phys").css("visibility", "visible");
        }
    });
});`

我可以写这个函数 4 次不同的时间，一次针对我正在使用的每个主题，但想要一个更干净的解决方案。我想知道我是否可以通过以下方式声明所有div：

<div class="subject phys"><p> Physics   </p></div>
<div class="subject chem"><p> Chemistry </p></div>
<div class="subject bio"><p>  Biology   </p></div>
<div class="subject math"><p> Math      </p></div>

然后在单击"主题"div 时运行某个 click（） 函数，让代码识别此特定div 所指的主题，并显示适当的"详细说明div"。

我相信我可以通过子类来做到这一点：

/* CSS */
div.subject{}
.subject.phys{}
.subject.chem{}
.subject.bio{}
.subject.math{}

有什么想法吗？有没有明显更好的方法来实现这样的事情？

编辑

这是一个更新的小提琴，HTML大致与实现中的HTML相同：

http://jsfiddle.net/yfrNn/6/

$('.subject').click(function(e){
e.stopPropagation();
e.preventDefault();
//use a specific class name like `insideDiv` for the divs that are inside your main ones instead of div.another below
if ($(this).find('div.another').is(":visible"))
{$(this).find('div.another').hide();}
else
{$(this).find('div.another').show();}
});
相关文章：