Question

我一直在开发这个网站（First Day）

我的“信仰”部分的javascript以前正在使用，然后我改变了它，因为设计改变了一点。 javascript是相同的，除了我需要在页面加载时隐藏一些元素。单击一下，根据单击的单词，将显示该描述，其他（如果已显示）将消失。我所做的更改可以在我的本地计算机上运行，但不能在我的Web服务器上运行。我的javascript可能有什么问题？

这是编辑过的代码;但是，它仍然无法正常工作

感谢您的帮助。这是我无法弄清楚的。

以下是该网站压缩文件夹的链接。 Dropbox Zipped Folder

JavaScript代码：

   $(document).ready(function(){

  $('.Descriptions').hide();

  $('#God').click(function () {

   $('.Descriptions').hide();
   $('#GodDescriptions').show();
 });

  $('#Jesus').click(function () {

   $('.Descriptions').hide();
   $('#JesusDescriptions').show();

  });

  $('#HolySpirit').click(function () {

   $('.Descriptions').hide();
   $('#HolySpiritDescriptions').show();

 });

  $('#Bible').click(function () {

   $('.Descriptions').hide();
   $('#BibleDescriptions').show();

  });

  $('#Man').click(function () {

   $('.Descriptions').hide();
   $('#ManDescriptions').show();

  });

  $('#GodsRelationship').click(function () {

   $('.Descriptions').hide();
   $('#GodsRelationshipDescriptions').show();

  });

  $('#Salvation').click(function () {

   $('.Descriptions').hide();
   $('#SalvationDescriptions').show();

  });

  $('#SavedWho').click(function () {

   $('.Descriptions').hide();
   $('#SavedWhoDescriptions').show();

  });

  $('#Perseverance').click(function () {

   $('.Descriptions').hide();
   $('#PerseveranceDescriptions').show();

  });

  $('#GospelOrd').click(function () {

   $('.Descriptions').hide();
   $('#GospelOrdDescriptions').show();

  });

  $('#Resurrection').click(function () {

   $('.Descriptions').hide();
   $('#ResurrectionDescriptions').show();

  });

  $('#ChurchGov').click(function () {

   $('.Descriptions').hide();
   $('#ChurchGovDescriptions').show();

  });

  $('#SecondComing').click(function () {

   $('.Descriptions').hide();
   $('#SecondComingDescriptions').show();

  });

  $('#Missions').click(function () {

   $('.Descriptions').hide();
   $('#MissionsDescriptions').show();

   });

});

Answer 1

不要使用ID来切换大量元素的可见性。这是不可维护的，并忽略了ID的用途;当你需要做有针对性的工作（导航到它们，操纵单个元素等）时，它们是一个独特的属性。

给所有这些位一个具有相同类的类属性（或者如果它们已经有一个，给它们所有相同的类作为额外的类），以及单个类的切换。

<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>

然后是一个简单的

$(".line").hide();

隐藏一切，

$(".line").hide();
$("#justthatline").show();

显示单个部分

Answer 2

使用.toggle()

如果可见则隐藏对象，如果隐藏则可行。

因此，在您的示例中，将内容设置为可见或隐藏，然后切换应通过单击实现的内容。

此外，您的评论是HTML评论，在JavaScript的上下文中无效。

<!--Category Logic-->

应该是

//Category Logic

或

/*Category Logic*/

这可能会导致您的问题。

编辑：

我喜欢迈克所说的关于使用类的方法，这些类可以使这种方式更容易处理和阅读。

将class="description"添加到所有额外文字中，然后您可以使用切换来完成剩下的工作。

EX。

$(".description").hide();

$("#God").click(function(){     
      $(".description:not(#GodDescription)").hide();
      $('#GodDescription').toggle();
    });

这会隐藏您想要切换的所有内容，然后切换它。

Javascript的问题

2 个答案:

编辑：

EX。