javascript - 使用jquery从标签中删除类时出现问题

Question

我有几个像这样的 div 框，它们都像 productholder2 , productholder3等等。这是其中之一:

 <div class="productholder1>  
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   tempor incididunt</p>     
    <input type="button" value="Läs mer" class="button">                                               
</div>

我想要实现的是删除 <p> 上的这个隐藏类使用 jQuery 标记。

不知何故，我需要指定它是 productholder1的<p>我想删除类，以便弹出文本，因为在 CSS 中我有 .hidden{display:none);通过删除该类，文本应该弹出。

我已经尝试了以下我制作的 jQuery，但它不起作用。我究竟做错了什么？

<script type="text/javascript">
   $(document).ready(function () {
       $(".button").click(function () {
           $('.productholder1').removeClass("hidden");
       });
   });
</script>

Answer 1

hidden类(class)在 <p>元素不是 <div>元素是您当前选择的元素，因此您需要使用 '.productholder1 p' 选择器捕获它并删除该类。如果你只想<p>紧邻产品支架 div 下方的元素，您可以使用此选择器 '.productholder1 > p'也是如此。

<script type="text/javascript">
   $(document).ready(function () {
       $(".button").click(function () {
           $('.productholder1 p').removeClass("hidden");
       });
   });
</script>

一些其他选项 -

1. 全部 <p>带有 hidden 的元素紧接着 <div> 下面的类
   1. $('div > p.hidden')
2. 带有 <p> 的多个选择器以下
   1. $('.productholder1 p, .productholder2 p, .productholder3 p')