JavaScript按钮单击时添加/删除类/id样式。-显示：无/块

当您单击按钮时，我正在尝试这样做：

• 移除按钮和标题
• 将显示隐藏的内容

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

下面的JavaScript代码不起作用，但它应该让您了解我试图实现的目标。我不确定如何联系这两个ID/类，因为我需要同时联系这两个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>

$（'.mobileAdultBtn'）。在（'click'函数（）{
$（'#vContentLeft'）.css（'display'，'block'）；
$（'.backBtn'）.css（'display'，'block'）；
$（'.mobileAdultBtn'）.css（'display'，'none'）；
$（'.mobileYoungAdultBtn'）.css（'display'，'none'）；
$（'.productHeading'）.css（'display'，'none'）；
});
$（'.backBtn'）。在（'click'函数（）{
$（'#vContentLeft'）.css（'display'，'none'）；
$（'.backBtn'）.css（'display'，'none'）；
$（'.mobileAdultBtn'）.css（'display'，'block'）；
$（'.mobileYoungAdultBtn'）.css（'display'，'block'）；
$（'.productHeading'）.css（'display'，'block'）；
});

第1期

如果单击函数在“单击”后缺少逗号，则应为：

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

但是.on是一个通用的事件处理程序，并且超出了您的需要，请使用更简单的函数。单击（）

第二期

使用

$（this）.find（“#whateverid”）

只查看具有该id的对象，这些对象是调用该函数的对象的子对象，即按钮。因此，除非标题位于按钮内部，否则该按钮将无法工作

您要检查该id将出现在页面上的任何位置：

$('#whateverid')

---

也许是这样的

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>

Javascript

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

  })
}(jQuery));

---

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

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

应该是

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

$（'.mobileAdultBtn'）。单击（函数（）{
$（'#vContentLeft'）.css（'display'，'block'）；
$（'.backBtn'）.css（'display'，'block'）；
$（'.mobileAdultBtn'）.css（'display'，'none'）；
$（'.mobileYoungAdultBtn'）.css（'display'，'none'）；
$（'.productHeading'）.css（'display'，'none'）；
});
$（'.backBtn'）。单击（函数（）{
$（'#vContentLeft'）.css（'display'，'none'）；
$（'.backBtn'）.css（'display'，'none'）；
$（'.mobileAdultBtn'）.css（'display'，'block'）；
$（'.mobileYoungAdultBtn'）.css（'display'，'block'）；
$（'.productHeading'）.css（'display'，'block'）；
});

以下代码解决了您的疑问。始终建议尽可能使用本机JavaScript代码。并且不要将jQuery用作基本操作。协助执行您的计划

函数boton1（）{
document.getElementById（“backBtn”）.setAttribute（“样式”，“显示：块”）；
document.getElementById（“vContentLeft”）.setAttribute（“样式”，“显示：块”）；
document.getElementById（“mobileAdultBtn”）.setAttribute（“样式”，“显示：无”）；
}
函数boton2（）{
document.getElementById（“backBtn”）.setAttribute（“样式”，“显示：无”）；
document.getElementById（“vContentLeft”）.setAttribute（“样式”，“显示：无”）；
document.getElementById（“mobileAdultBtn”）.setAttribute（“样式”，“显示：块”）；
}
Texto con CONTINIDO，开发商@locoalien Fallowhttp://www.twitter.com/locoalien

我不确定你的问题到底是什么，但你的选择器太冗长了。将

$（this.find（'.backBtn'）

更改为

$（'.backBtn'）

。什么不适合你？你能提供一个与html的小提琴以及？代码本身看起来很好，尽管没有必要将其分成2个标签

我制作的javascript代码不起作用，我知道这是错的。如果代码放在正确的位置并“起作用”，则该代码完全有效。您应该解释什么不起作用，为什么不起作用，并最终分享一些示例HTML和CSS。您正在使用JS操作元素，记得吗？我什么也看不见。我是说我没想到它会起作用。我只是把我看到的一个例子拼凑起来。但是找不到任何有效的方法。当我点击按钮时，它不会改变任何样式。它都正确地连接到每个类/ID，所以你是说代码应该按原样工作吗？你没有看到任何错误吗？我将根据您的建议更新我的示例。发现语法错误：您的参数

之间缺少一个逗号。on（'click'函数（）{…

应该是

。on（'click'，函数（）{…

Eric请将其作为解决方案发布。您赢了，先生！我删除了$（此）。查找并更新描述。但它仍然不起作用。当我单击按钮时。它甚至不会使自己消失，更不用说更改其他元素的样式了。代码与我的其他工作脚本一起位于页面底部。是的，非常感谢！现在效果很好。Eric你能告诉我如何将多个样式放入代码中吗？那么我需要的不是$（'vContentRight'）.css（'display'，'block'），而是：$（'vContentRight'）.css（'display'，'block'），（'background'，'blue'）；当然，有两个选项。1）你可以链接它们

。css（'display'，'block'）。css（'background'，'blue'）；

或2）传入一个对象

。css（{display:'block'，background blue'}）

注意：如果您传入一个对象，并且您的css属性中有一个

-

（例如

左边距

），那么您必须在

.css（{'margin-left'：'1px'，'margin-right'：'1px'）；

在其周围或使用camelCase

.css（{marginLeft:'1px'，marginRight:'1px'））

我建议在元素上切换类名，然后在css中添加所有样式。@Portal\u Zii，如果这回答了您的问题，请单击复选标记将其标记为您的解决方案。

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

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

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