javascript - 通过单击单个链接在网站的多个位置显示和隐藏文本

Question

我想通过单击“单击以获取更多文本”链接来显示和隐藏网页上的内容。虽然这工作正常，但我的意图是同时在页面的两个位置显示更多文本。

如何通过单击“取消隐藏”和隐藏两个不同的 div id？

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
}
</script>

和 HTML:

<a href="javascript:unhide(‘content’);”>Click for More text</a>

<div id=“content” class="hidden">
hi
</div>

<div id=“content2” class="hidden">
how can i display this from the same link..?
</div>

Answer 1

再将它们放在一个 div 中将其包裹起来，然后只显示那个

<a href="javascript:unhide(‘content_wrapper’);”>Click for More text</a>

<div id="content_wrapper" class="hidden">
  <div id=“content”>
     hi
  </div>

  <div id=“content2”>
    how can i display this from the same link..?
  </div>
</div>

如果你正在使用 jQuery，更好的办法是使用类，例如检查下面的代码

HTML:

<button onclick="unhide('more_info')">
   Click for More text
</button>

<div class="more_info hidden">
  hi
</div>

<div class="more_info hidden">
  how can i display this from the same link..?
</div>

Javascript:

function unhide (arg) {
   // toggle class, or remove or add, what ever you need
   $('.'+ arg).toggleClass('hidden');
}

编辑:

回答 OP 在评论中发布的问题。谈到 jQuery，大多数人只使用几种形式的选择器。您可以访问this link to find out more about selectors .

对于基础知识，您将主要使用 2 种形式。我个人在大多数情况下使用类选择器，它是 '.selector'

您可以用它做什么意味着您可以以 $('.classSelector') 的形式使用它，其中 classSelector 可以是您要选择的任何类。

几个例子

<div id="test-div-id" class="test-div-class">
  <p class="paragraph paragraph-1">This is first</p>
  <p class="paragraph paragraph-2">This is second</p>
  <p class="paragraph paragraph-3">This is third</p>
</div>

对于javascript，你可以使用下面的

$('.test-div-class')
// returns the div by selecting it's class

$('#test-div-id')
// returns the div by selecting it's ID

所以如果你想检查第一段的值，你可以这样做

$('.paragraph-1').html();
// returns 'This is first'

你也可以选择多个东西，假设你想隐藏所有段落，你可以使用 jQuery 中的 .hide() 函数。

$('.paragraph').hide();
// the selector returns collection of all nodes containing class 'paragraph'
// after that we apply function hide.

最后一个适用于所有类，因此您可以混合段落、div 和 span 等等。这将我们带到下一个选择器，按类型

$('p').hide();
// this selector will return every paragraph by type selection

你也可以使用我在答案中所做的，简单地添加字符串

$('.paragraph-1').html();
// returns 'This is first'

var selectorAsAnVariable = 'paragraph-1';

$(selectorAsAnVariable).html();
// returns nothing since it didn't select anything
// this is same as writing $('paragraph-1').html() which would be type selection
// since you don't have type paragraph-1 it fails

$(.selectorAsAnVariable).html();
// this fails on syntax error because unexpected token

$('.selectorAsAnVariable').html();
// returns nothing since it didn't select anything
// this is because you would be trying to select elements which really have that class


$('.'+selectorAsAnVariable).html();
// returns 'This is first'
// this is because this is same as $('.'+'paragraph-1').html()
// which is same as $('.paragraph-1').html() which we know is an class selector

您也可以混合使用它们，但出于性能问题、代码可读性和其他原因，我不建议这样做，例如，您可以按类定位 div 并从那里过滤 paragraph-1。但在大多数情况下，最好以可以避免这种情况的方式编写代码。

有关该主题的更多信息，请查看我提供的链接。您也可以使用搜索在此处查找其他功能说明。

我希望这能澄清一些事情:)