JavaScript 按钮。 - Add/Remove class/id 样式 onClick。 - 显示：none/block

Question

我正在努力做到这一点，当你点击按钮时：

按钮和标题已删除；
显示隐藏内容。

然后隐藏的内容有一个后退按钮。单击它后，它会还原所有更改。

下面的 JavaScript 代码不起作用，但它应该让您了解我正在努力实现的目标。我不确定如何联系这两个 ids/classes，因为我需要两者都联系。

<script>
$('.mobileAdultBtn').on('click' function () {
    $('#vContentLeft').css('display', 'block');
    $('.backBtn').css('display', 'block');
    $('.mobileAdultBtn').css('display', 'none');
    $('.mobileYoungAdultBtn').css('display', 'none');
    $('.productHeading ').css('display', 'none');
});

$('.backBtn').on('click' function () {
    $('#vContentLeft').css('display', 'none');
    $('.backBtn').css('display', 'none');
    $('.mobileAdultBtn').css('display', 'block');
    $('.mobileYoungAdultBtn').css('display', 'block');
    $('.productHeading ').css('display', 'block');
});
</script>

Answer 1

第 1 期

你的点击功能在"click"后面少了一个逗号，应该是：

$('#buttonid').on('click', function(){

但是 .on 是一个通用的事件处理程序，对于您的目的而言，它是必需的，请使用更简单的函数 .click():

$('#buttonid').click(function(){
     `//hide and show things 
}`

第 2 期

使用 $(this).find('#whateverid') 仅查看 object 具有调用该函数的 object 的 children 的按钮。因此，除非 header 位于按钮内，否则它将不起作用。

您想检查该 ID 将出现在页面上的什么位置：

$('#whateverid')

Answer 2

也许是这样的？

HTML

<button class="toggle ">Show</button>
<div class="content">
  <h1>Hello</h1>
  <p>World</p>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>  
</div>

CSS

.content {
   background:silver;
}
.content.hidden {
  display:none;
}

Javascript

(function($){
  $('.toggle').click(function(){
    $('.content').toggleClass('hidden');

  })
}(jQuery));

http://codepen.io/anon/pen/mVbjNN

Answer 3

您似乎有一种语法，您在参数之间缺少一个逗号

.on('click' function () {...

应该是

.on('click', function () {...

Answer 4

<script>
$('.mobileAdultBtn').click(function(){
    $('#vContentLeft').css('display', 'block');
    $('.backBtn').css('display', 'block');
    $('.mobileAdultBtn').css('display', 'none');
    $('.mobileYoungAdultBtn').css('display', 'none');
    $('.productHeading ').css('display', 'none');
});

$('.backBtn').click(function(){
    $('#vContentLeft').css('display', 'none');
    $('.backBtn').css('display', 'none');
    $('.mobileAdultBtn').css('display', 'block');
    $('.mobileYoungAdultBtn').css('display', 'block');
    $('.productHeading ').css('display', 'block');
});
</script>

Answer 5

下面的代码解决了你的疑惑。始终建议尽可能使用本机 JavaScript 代码。并且不要使用 jQuery 作为基本操作。协助您的程序的性能。

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      function boton1(){
        document.getElementById("backBtn").setAttribute("style","display: block");
        document.getElementById("vContentLeft").setAttribute("style","display: block");
             document.getElementById("mobileAdultBtn").setAttribute("style","display:none");
         
        
        
      }
      function boton2(){
        document.getElementById("backBtn").setAttribute("style","display: none");
        document.getElementById("vContentLeft").setAttribute("style","display: none");
             document.getElementById("mobileAdultBtn").setAttribute("style","display:block");
        
      }
</script>
    </head>
  <body>
    <input type="button" value="accion" id="mobileAdultBtn" onclick="boton1();">
    
    <input type="button" value="back" id="backBtn" onclick="boton2();">
    <div id="vContentLeft">Texto con contenido, developer @locoalien Fallow http://www.twitter.com/locoalien</div>
    
    </body>
  
  </html>

以下是执行过程中的图片。

希望对你有所帮助。不要忘记在推特上关注我@locoalien

JavaScript 按钮。 - Add/Remove class/id 样式 onClick。 - 显示：none/block

JavaScript button. - Add/Remove class/id styles onClick. - Display: none/block

html

javascript

css

jquery

onclick