为具有相同类的元素分配唯一ID

Question

我正在创建一个网站,其中有两个不同的按钮.

通过使用jQuery,我想隐藏并显示两个元素.这两个元素都是文本.例如,通过点击buttonA,textA应该显示,如果textB可见,它应该隐藏.同样通过点击buttonB,textB应该显示,如果textA可见,它应该隐藏.最初两个文本都应该被隐藏但是加载到它们的位置上.

两个文本在布局上具有相同的定位.我已经定义了一个类(.content是它的名字),它维护了文本的所有样式.现在我面临的问题是我和班级有两个div,但是我无法给文本两个不同的ID.

.content {
  visibility:hidden;
  border-style: none;
  display: block;
  position: fixed;
  text-align: centre;
  z-index: 1;
  margin-top: 40%;
  margin-left: 25%;
  margin-right: 25%;
  background-color: transparent;
  font-size:2.5em;
}

问题在于如何为两个文本分配一些唯一ID

<div class="content">TextA goes here<br></div>
<div class="content">TextB goes here<br></div>

所以当我使用jquery时

$("#ButtonA").click(function(){
  $("#TextA").show();$("#TextB").hide();
});

$("#ButtonB").click(function(){
  $("#TextB").show();$("#TextA").hide();
});

虽然这可能是一个蹩脚的问题,但我无法弄清楚自己,所以不得不问.

Answer 1

你不必添加id,只需用jQuery获取它们 -

$("#ButtonA").click(function(){
    $('.content').eq(0).show();
    $('.content').eq(1).hide();
});

$("#ButtonB").click(function(){
    $('.content').eq(1).show();
    $('.content').eq(0).hide();    
});