0

我有几个看起来像这样的 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>
4

4 回答 4

5

该类hidden位于<p>元素上，而不是<div>您当前选择的元素上，因此您需要使用选择器'.productholder1 p'来抓取它并删除该类。如果您只想要产品持有人 div正下方的<p>元素，您也可以使用此选择器。'.productholder1 > p'

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

其他一些选择 -

  1. 类紧接在 a 之下的所有<p>元素hidden<div>
    1. $('div > p.hidden')
  2. 带有<p>下面 的多个选择器
    1. $('.productholder1 p, .productholder2 p, .productholder3 p')
于 2012-10-30T15:13:52.480 回答
3

该类hidden在 的子级上.productholder1，而不是在元素本身上。它也是按钮的兄弟。

此行将从具有该类的任何（后代）元素中删除.productholder1该类。为了提高效率，它将完全忽略任何尚未隐藏的元素：

$('.productholder1 .hidden').removeClass('hidden');

但是- 我认为您的计划是每个按钮只影响同一组中的元素？如果是这样，请改用它，它仅依赖于遍历 DOM 层次结构，而不是每个组上都有一个特定的类。

$(".button").click(function () {
    $(this).parent().find('.hidden').removeClass('hidden');
});

然后，这一块代码将适用于每一组元素，而不必为每个类复制它.productholderNNN。

FWIW，使用编号的类来表示其他相同的 DOM 结构组的各个成员实际上是对 CSS 类的误用。这就是 ID 的用途。类应该代表应该被同等对待的元素组。

于 2012-10-30T15:13:38.683 回答
2

它应该喜欢

  $('.productholder1').find("p").removeClass("hidden");

或者

$('.productholder1 p').removeClass("hidden");

您要做的是删除其中的类， .productholder1 但隐藏的类不存在，因此您需要选择.productholder1来获取它

于 2012-10-30T15:13:46.393 回答
0

试试这个代码：

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

或者

 <script type="text/javascript">
               $(document).ready(function () {
                   $(".button").click(function () {
                       $('.productholder1').find('p').removeClass("hidden");
                   });
               });
            </script>
于 2012-10-30T15:14:26.893 回答