使用JavaScript/jQuery将CSS动态添加到非同级div？

我有这段代码，我想在启动

test（）

函数时将

display

属性添加到div。我在同一个文件中多次调用该函数，并希望它对每个按钮单独起作用

目前，如果我单击任何按钮，它都会将CSS添加到第一个

内联数据

div，而不是我单击的那个。我需要更改什么才能使其适用于与按钮匹配的

内联数据



.内联数据{
显示：无；
}
数据1
数据2
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

点击
数据1
数据2
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

点击
数据1
数据2
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

点击
功能测试（）{
document.querySelector（“.inline data”）.style.display=“flex”；
}
要在
test（）
函数中执行此操作，您需要输入单击的按钮，然后执行与下面类似的操作

相反，您可以在一个功能中完成所有操作-从每个按钮中删除
onClick
，此功能将在所有按钮单击时触发：

$( "button" ).click(function() {
  $(this).closest("tr").find("div.inline-data").css("display", "flex");
});

这将查找所单击按钮的
tr
祖先，然后查找具有
内联数据的子/孙元素。当它找到它们时，它会添加您的CSS

注意-如果您不想对某些按钮使用此选项，请为这些按钮指定一个类，然后在选择器中选择该类，例如
$（“button.myclass”）。单击（…

工作片段


$（“按钮”）。单击（函数（）{
$（this）.closest（“tr”）.find（“div.inline-data”）.css（“display”、“flex”）；
})；
.inline数据{
显示：无；
}

数据1
数据2
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

点击
数据1
数据2
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

点击
数据1
数据2
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

点击
在jquery中，您可以像这样动态添加css
$（“.inline data”）.css（'display'，'flex'）；
。因此，您希望每个按钮将flex添加到其各自的
inline data
元素中？如果需要撤消此操作，则更容易切换类并使用css规则因为class@AndrewL64是的，你是对的。但是我怎样才能不添加任何额外的类呢？你能使用jquery吗？