-3

私が持っているブログで jQuery の関数を「再生」しhide()たいのですが、ボタンをクリックするとページ上のすべての「ケーキ名」が非表示になるようにしたいと考えています。私はjQueryの初心者なので、その方法がよくわかりません。誰か助けてくれませんか？私のコードは次のとおりです。

<?php @include APP_PATH . '/view/snippets/header.tpl.php'; ?>

<h2>Our cakes</h2>

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h2").hide();
            });
        });
    </script>

<?php if ($cakes) : ?>

    <ol>

    <?php foreach ($cakes as $cake) : ?>

        <li>

            <h3><?php echo $cake->name; ?></h3>
            <ul>
                <li><b>Quantity:</b> <?php echo $cake->quantity ?></li>
                <li><a href="<?php echo APP_URL ?>cake/view/<?php echo $cake->id ?>">View</a></li>
            </ul>

        </li>

    <?php endforeach; ?>

    </ol>

    <body>
    <button>Click me</button>
    </body>


<?php else : ?>

    <p>Sorry, no sugar for you, babyyy!!</p>

<?php endif; ?>

<?php @include APP_PATH . '/view/snippets/footer.tpl.php'; ?>

私は何かを試しましたが、うまくいきません。

4

4 に答える 4

4

現在、すべて非表示にし<h2>ていますが、ケーキの名前はすべて<h3>です。これが問題の原因である可能性があります。 $("h2").hide();する必要があります$("h3").hide();。

編集： jQueryが含まれていない場合、関数（$()セレクターの使用はすべてjQueryに依存）は機能しません。次のようなもので jQuery を含めることができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

jQuery を組み込むことの複雑さの詳細については、この完全に回答された StackOverflow questionを参照してください。

または、ここで行っていることには実際には必要ないため、jQuery を使用しないように関数を書き直すこともできます (最初に、Pooshonk が提案するように<button>anを指定するとよいでしょう)。id

window.onload = function () {
   document.getElementById("yourButton").onclick = function() {
      elements = document.getElementsByTagName("h3");
      for (var i = 0; i < elements.length; i++) {
         elements[i].style.display = "none";
      };
   };
};
于 2013-05-23T08:44:54.703 に答える
1

あなたのページには他の h3 要素があるかもしれないので、ケーキ名を囲む h3 要素に id を与えてから、以下の jquery を使用して名前を隠すことができます。コードは次のようになります。

 <script>
     $(document).ready(function(){
      $("button").click(function(){
        $("h3#cakeName").hide();
    });
});


<li>

    <h3 id="cakeName"><?php echo $cake->name; ?></h3>
    <ul>
        <li><b>Quantity:</b> <?php echo $cake->quantity ?></li>
        <li><a href="<?php echo APP_URL ?>cake/view/<?php echo $cake->id ?>">View</a></li>
    </ul>

</li>

 <?php endforeach; ?>

</ol>

 <body>
  <button>Click me</button>
 </body>
于 2013-05-23T08:48:57.777 に答える
0

編集：これはうまくいきます！

http://jsfiddle.net/zZyts/

ボタンと h3 に ID を追加します。

<button id="hide_cake">Click me</button>
<h3 id="cake_name">Cake name here</button>

それに応じてjQueryを編集します

<script>
    $(document).ready(function(){
        $("#hide_cake").click(function(){
            $("#cake_name").hide();
        });
    });
</script>
于 2013-05-23T08:47:10.307 に答える
0

簡単な答えは次のとおりです。

<ol>
    <li>
         <h3>Cake-1</h3>
        <ul>
            <li><b>Quantity:</b> Good</li>
            <li><a href="#">View</a>
            </li>
        </ul>
    </li>
    <li>
         <h3>Cake-2</h3>
        <ul>
            <li><b>Quantity:</b>Yummi!!</li>
            <li><a href="#">View</a>
            </li>
        </ul>
    </li>
</ol>

<button>Click me</button>

<script>
 $(document).ready(function () {
     $("button").click(function () {
         $("h3").parent().hide();
     });
 });
</script>
于 2013-05-23T08:59:13.350 に答える