0

このような div ボックスはほとんどありません。それらはすべて のようなものproductholder2ですproductholder3。これはその 1 つです。

 <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'sクラスであることを指定する必要があるため、クラスを削除することでテキストがポップアップするはずの CSS があるため、テキストがポップアップします。<p>.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 のすぐ下の要素のみが必要な場合は、このセレクターも使用できます。<div>'.productholder1 p'<p>'.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')
于 2012-10-30T15:13:52.480 に答える
3

hiddenクラスは、要素自体ではなく、の子にあります。ボタンの兄弟.productholder1でもあります。

この行は、そのクラスを持つ (子孫の) 要素からそのクラスを削除し.productholder1ます。効率のために、まだ非表示になっていない要素は完全に無視されます。

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

しかし、あなたの計画は、各ボタンが同じグループにある要素にのみ影響を与えるということだったと思いますか? その場合は、代わりにこれを使用してください。これは、各グループに特定のクラスが存在するのではなく、DOM 階層をトラバースすることに依存しています。

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

このコードの 1 つのチャンクは、要素のすべてのグループに対して機能するため、クラスごとに複製する必要はありません.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 に答える