使用 Jquery 控制 <div> 标签内的 <span> 标签答案

【问题标题】：Controlling <span> tag inside a <div> tag using Jquery使用 Jquery 控制 <div> 标签内的 <span> 标签
【发布时间】：2019-04-27 00:01:09
【问题描述】：

以下代码运行良好（从 w3schools.com 复制）

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("span").hide();
  });
  $("#show").click(function(){
    $("span").show();
  });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

但是，如果我将以下代码包含在 <div> 标记中并将 <p> 更改为 <span> 它将不起作用。

<body>
<div>
  <span>If you click on the "Hide" button, I will disappear.</span>

  <button id="hide">Hide</button>
  <button id="show">Show</button>
</div>
</body>

我想做类似的工作，在 div 内有跨度，如果我输入了错误的条目，例如年龄小于 5，它应该显示一个 <span> 标签，表示抱歉，此服务不适用于5年以下。意味着我想控制 div 标签内的 span 标签，而 <p> 在 div 标签内工作正常，这是我在 min 时注意到的唯一 span（可能更多标签）。

【问题讨论】：

您正在使用 p 标签关闭您的 span 标签...为什么它会起作用？使用正确的结束标签而不是其他结束标签来关闭您的跨度标签
你在哪里关闭第一个 <span> 以及 </p> 来自哪里？
我看到你的代码中总共有 0 个 div
谢谢大家，我想要的是使用 Jquery 控制 div 标签内的 span 标签。我现在已经把我的问题说清楚了。对不起，最初的问题搞砸了。这只是一个星期五。谢谢！
您在 html 中将 p 更改为 span - 您也需要在 js 中反映这一点，这将解决您的问题

标签： javascript jquery html css

【解决方案1】：

一般来说，“span”甚至“div span”都可以。但是如果您需要在 div 中达到特定的跨度，您必须给 div 或跨度一个类然后达到跨度。请参阅下面的 sn-p。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $(".someclass .wehide").hide();
  });
  $("#show").click(function(){
    $(".someclass .wehide").show();
  });
});
</script>
</head>
<body>
<div class="someclass">
  <span class="wehide">If you click on the "Hide" button, I will disappear.</span>
<br/>
  <span class="wedont">If you click on the "Hide" button, I WILL NOT disappear.</span>
  <button id="hide">Hide</button>
  <button id="show">Show</button>
</div>
</body>
</html>

【讨论】：

感谢@Evik Ghazarian。我只更改了 html 的正文，并打算相应地反映到 jquery 中，但是我已经更改了。问题是这段代码将如何工作？意味着如何控制 div 内的跨度？再次感谢！
非常感谢！假设我们有不止一个跨度标签，我只想消失一个。如何仅访问一个跨度标签；如果你点击“隐藏”按钮，我会消失。我知道我们可以给 span 提供 id 但问题是 $(".someclass span").hide( );而不是“.someclass span”？ "
那么也给 span 一个类
@zaffar 查看我所做的更新 2 跨越不同的类
@zaffar 如果答案有帮助，请验证为答案。请记住，如果对 div 和 span 都使用类，它应该类似于“.someclass .wehide”

【解决方案2】：

它应该可以工作

            <script>
            $(document).ready(function(){
              $("#hide").click(function(){
                $("div span").hide();
              });
              $("#show").click(function(){
                $("div span").show();
              });
            });
            </script>

            <body>
                <div>
                    <span>If you click on the "Hide" button, I will disappear.</span>   
                </div>

                <button id="hide">Hide</button>
                <button id="show">Show</button>

            </body>

但更好的方法应该是使用像

这样的选择器

            <script>
            $(document).ready(function(){
              $("#hide").click(function(){
                $(".myspan").hide();
              });
              $("#show").click(function(){
                $(".myspan").show();
              });
            });
            </script>

            <body>
                <div>
                    <span class="myspan">If you click on the "Hide" button, I will disappear.</span>    
                </div>

                <button id="hide">Hide</button>
                <button id="show">Show</button>
            </body>

但是如果由于某种原因你不能添加类选择器使用一些父引用

            <script>
            $(document).ready(function(){
              $("#hide").click(function(){
                $(".myparent span").hide();
              });
              $("#show").click(function(){
                $(".myparent span").show();
              });
            });
            </script>

            <body>
                <div class="myparent">
                    <span >If you click on the "Hide" button, I will disappear.</span>  
                </div>

                <button id="hide">Hide</button>
                <button id="show">Show</button>
            </body>

根据你的需要，你可以做类似的事情

            <script>
            $(document).ready(function(){
              $("#hide").click(function(){
                $(".erros").hide();
              });
              $("#show").click(function(){
                $(".erros").show();
              });
            });
            </script>

            <body>
                <div class="form">
                    <div>
                        Other content like input
                    </div>
                    <div class="erros">
                        <span >this service isn't for the under 5 years. </span>    
                    </div>
                </div>

                <button id="hide">Hide</button>
                <button id="show">Show</button>
            </body>

【讨论】：