javascript - 我试图在页面加载时隐藏一个段落,然后执行显示/隐藏 jquery 并更改按钮名称 onclick

标签 javascript jquery html toggle

我是软件开发的新手。我正在创建一个段落,当您单击一个按钮时,它将显示西类牙语版本的文本而不是英语。英文版本将加载,现在它们都加载了,我正试图只加载英文并隐藏西类牙文。我想在两段之间切换 onclick。我还想将按钮从西类牙语更改为英语。

感谢您的帮助。

    <!DOCTYPE html>
   <html>
   <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Modal Practice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" 
         href="hidetest.css" />
    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    </head>

<body>


<div class="container" id="languageE">
    <p>
        Starting in 2014. 
    </p>
</div>
<div class="container" id="languageS">
    <p>A partir del 2014...
    </p>
   </div>

    <div>
    <button class="Lang" id="myBtn">Español</button>
     </div>
    <script>
    $(document).ready(function() {

        $('#myBtn').on('click', function() {
            $('#languageE').toggle();
        });


    });

    $('.Lang').click(function() {
        var $this = $(this);
        $this.toggleClass('Lang');
        if($this.hasClass('Lang'))
    {       
  $this.text('Español');
    }   else {
        this.text('English');
    }
    });
</script>




</body>



</html>

最佳答案

在代码中使用这个脚本:

 <script>
      $(document).ready(function() {
            $('#languageS').hide();

            $('#myBtn').on('click', function() {
               if($(this).text() == "Español") {
                   $(this).text('English')
                   $('#languageE').hide();                                                           
                   $('#languageS').show();
               }
               else{
                   $(this).text('Español')
                   $('#languageS').hide();                                                           
                   $('#languageE').show();
               }
            });
      });
 </script>

这是相同的 fiddle :https://jsfiddle.net/43qnrek7/

请告诉我它是否适合您,如果您遇到任何问题,请毫不犹豫地再次询问我。

谢谢

关于javascript - 我试图在页面加载时隐藏一个段落,然后执行显示/隐藏 jquery 并更改按钮名称 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53954252/

相关文章:

javascript - 如何将第 n 个子选择器与 jquery 子选择器一起使用?

javascript - 图像旋转器不会隐藏第二个实例中的最后一个图像

javascript - 使用箭头键浏览列表? (JavaScript/JQ)

php - 如何在发布请求后保持选择表单项?

javascript - 从带有 post 的函数返回值

javascript - 无法将文本颜色设置为较早的值

javascript - 使用javascript检查对象内部的对象是否为空

javascript - 高地在完全消耗之前添加到流中?

jquery - Bootstrap 溢出元素

html - Sublime Text 2 的图像源补全