Question

我想在我拥有的博客上“玩”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'; ?>

我尝试了一些东西，但它不起作用。

Answer 1

您目前隐藏了所有<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的复杂性的更多详细信息，请参阅this thoroughly answered StackOverflow question。

或者，您可以重新编写函数以不使用jQuery，因为对于您在此处执行的操作而言，它并不是必需的（首先，您可以很好地提供<button> Pooshonk建议的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";
      };
   };
};

Answer 2

在你的页面上，你可能有其他的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>

Answer 3

编辑：这个工作！

http://jsfiddle.net/zZyts/

为您的按钮添加ID，h3就像这样

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

Answer 4

简单的答案是：

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

使用jQuery隐藏标记的所有实例

4 个答案: