JavaScript按钮。 - 在onClick上添加/删除class / id样式。 - 显示：无/阻止

I am trying to make it so when you click the button:

我点击按钮时试图这样做:

the button and Heading are removed;

按钮和标题被删除;

the hidden content is displayed.

显示隐藏的内容。

Then the hidden content has a back button. Once you click that it reverts all changes.

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

The JavaScript code below doesn't work, but it should give you an idea of what I'm trying to achieve. I am not sure how to contact both ids/classes since I need to do both.

下面的JavaScript代码不起作用,但它应该让你知道我想要实现的目标。我不确定如何联系两个ID /类,因为我需要同时执行这两个操作。

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

5 个解决方案

#1

You seem to have a syntax you are missing a comma in between your arguments

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

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

should be

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

#2

Maybe something like this?

也许是这样的?

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

#3

Issue 1

You click function is missing a comma after "click", it should be:

点击功能在“点击”后缺少逗号,应该是:

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

But .on is a general event handler and more than is necessary for your purposes, use the simpler function .click():

但是.on是一个通用的事件处理程序,并且不仅仅是为了你的目的,使用更简单的函数.click():

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

Issue 2

Using $(this).find('#whateverid') looks only at objects with that id that are children of the object that the function was called on, the button. So unless the header is inside the button that will not work.

使用$(this).find('#whateverid')只查看具有该id的对象,该对象是调用该函数的对象的子项,即按钮。所以除非标题在按钮内部不起作用。

You want to check for wherever that id will appear on the page:

您想要检查该ID在页面上显示的位置:

$('#whateverid')

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

#5

The following code solves your doubts. It is always recommended to use native JavaScript code whenever possible. And do not use jQuery as basic operations. Assist the performance of your program.

以下代码解决了您的疑虑。始终建议尽可能使用本机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>

Below are pictures of the execution is observed.

下面是观察执行的图片。

I hope it helps you. Do not forget to follow me on twitter @locoalien

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

#1