Question

以下代码可以正常工作（从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标签内效果很好，它是我在最小时注意到的唯一跨度（也许还有更多标签）。

Answer 1

通常，仅“ span”或什至“ div span”都可以。但如果您需要在div内达到特定的跨度，则必须给div或跨度一个类，然后达到该跨度。请参见下面的代码段。

class AuthController
{
    private var authSession: ASWebAuthenticationSession?

    func authenticate()
    {
        let string = self.createWebAuthUrl()
        guard let url = URL(string: string) else { return }

        self.authSession = ASWebAuthenticationSession(url: url, callbackURLScheme: "MaccaStravaWebAuth://", completionHandler:
        {
            url, error in

        })

        self.authSession?.start()
    }

    fileprivate func createWebAuthUrl() -> String
    {
        var url = String.empty

        url.append("https://www.strava.com/oauth/mobile/authorize")
        url.append("?client_id=000000") // Removed for stackoverflow...
        url.append("&redirect_uri=MaccaStravaWebAuth://test.com")
        url.append("&response_type=code")
        url.append("&approval_prompt=force")
        url.append("&grant_type=authorization_code")
        url.append("&scope=activity:write,activity:read_all")

        return url
    }
}

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

使用Jquery控制<div>标记内的<span>标记

2 个答案: