-3

我想在hide()我拥有的博客上“玩”jQuery 的功能，我想这样做，以便单击按钮将隐藏我页面上的所有“蛋糕名称”。我真的不知道该怎么做，因为我是 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 问题。

或者，您可以重新编写您的函数以不使用 jQuery，因为您在这里所做的事情并不是真正需要的（首先，像 Pooshonk 建议的那样给您<button>一个很好）：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

简单的答案是：

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