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>

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

不知怎的，我需要指定它是我要移除的productholder1的{{1}}类，因此在CSS <p>中通过删除类的文本弹出文本应该弹出。

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

.hidden{display:none);

Answer 1

hidden类位于<p>元素而非<div>元素，这是您当前正在选择的元素，因此您需要使用{{1}的选择器抓住它并删除该类。如果您只想在产品持有者div下方立即使用<{1}}元素，那么您也可以使用此选择器'.productholder1 p'。

<p>

其他一些选择 -

所有'.productholder1 > p'个元素，<script type="text/javascript"> $(document).ready(function () { $(".button").click(function () { $('.productholder1 p').removeClass("hidden"); }); }); </script>类紧接<p>以下
1. hidden
下面有<div>的多个选择器
1. $('div > p.hidden')

Answer 2

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

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

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

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

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

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

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

Answer 3

它应该

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

或

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

你要做的是删除.productholder1中的课程，但隐藏的课程不存在，所以你需要选择.productholder1来抓住它

Answer 4

试试这段代码：

   <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>

使用jquery从标记中删除类时出现问题

4 个答案: