Question

我试图在点击按钮时这样做：

删除按钮和标题;
显示隐藏的内容。

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

下面的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>

Answer 1

第1期

点击功能在“点击”后缺少逗号，应该是：

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

但.on是一个通用事件处理程序，不仅仅是为了您的目的，使用更简单的函数.click（）：

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

第2期

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

您想要检查该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>

下面是观察执行的图片。

我希望它可以帮到你。不要忘记在Twitter上关注我@locoalien

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

5 个答案: