查找并删除课程

Question

我有以下结构：

<li id="0" class="instruction">
        <div class="row1">
            title
        </div>
        <div class="row2 details hidden">
            details
        </div>
    </li>

隐藏的CSS是：display: none

我想当用户点击指令时，然后显示详细信息div。

$(document).ready(function () {
        $(".instruction").click(function(e){

            $(e).find('.details').removeClass("hidden");


        });
    });

尝试实现上述内容，但不起作用。任何想法？

Answer 1

你写的是'.instructionRow'，但根据html它应该是'.instruction'。并使用$（this）来引用被单击的元素。使用'on'（https://api.jquery.com/on/）会更好......

$(document).ready(function () {
    $(".instruction").on('click', function(e){
        $(this).find('.details').removeClass("hidden");
    });
});

Answer 2

非答案，但参考Google员工 - vanilla 用于查找课程和删除课程的Javascript选项

// Finding a class with VanillaJS (creates an array of results)
let x = document.getElementsByClassName("today");

if(x.length > 0){
    // Removing a class with VanillaJS
    x[0].classList.remove("today");
}

Answer 3

$(document).ready(function () {
    $(".instructionRow").click(function(){

        $(this).find('.details').removeClass("hidden");


    });
});