Question

我试图学习jQuery ......一切都变得缓慢而且稳定。不抱怨。但是，每当我正在做的教程向我展示一些东西时，我喜欢挑战自己做一些不同的事情。

所以这就是我所拥有的：

包含一些DIV的HTML页面。
我想在每个DIV的末尾动态添加一个SHOW / HIDE按钮。
如果我点击该按钮，那个显示/隐藏按钮上方的DIV应该消失。
HIDE按钮应显示为SHOW。如果我再次点击它，它应该再次显示DIV。

我知道如何在每个div的末尾添加一个显示/隐藏按钮。我不知道如何告诉每个按钮应隐藏他上方的DIV。

div没有唯一的ID，因此我认为我还应该为每个DIV添加一个唯一的ID。我想用jQuery做这个。

所以我认为我应该做一些foreach循环。我应该通过每个DIV，添加一个唯一的ID，添加唯一的显示/隐藏按钮，告诉确切的DIV号码隐藏/显示。

我的逻辑是否正确？谁能告诉我确切的语法？我不仅要寻找合适的代码，还要看看我是否有正确的逻辑。

谢谢

Answer 1

＆＃13;

$('button').click(function() {
  $(this).parent().prev().toggle();
  if ($(this).text() == 'Show') {
    $(this).text('Hide');
  } else {
    $(this).text('Show');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a
  <button>Hide</button>
</div>
<div>b
  <button>Hide</button>
</div>
<div>c
  <button>Hide</button>
</div>
<div>d
  <button>Hide</button>
</div>

＆＃13;

或者你的意思是这样的：

＆＃13;

$('button').click(function() {
  $(this).prev().toggle();
  if ($(this).text() == 'Show') {
    $(this).text('Hide');
  } else {
    $(this).text('Show');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>a</span>
  <button>Hide</button>
</div>
<div><span>b</span>
  <button>Hide</button>
</div>
<div><span>c</span>
  <button>Hide</button>
</div>
<div><span>d</span>
  <button>Hide</button>
</div>

＆＃13;

或者像这样：

＆＃13;

$('button').click(function() {
  $(this).prev().toggle();
  if ($(this).text() == 'Show') {
    $(this).text('Hide');
  } else {
    $(this).text('Show');
  }
});

＆＃13;

div {display: inline}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
  <button>Hide</button><br/>

<div>b</div>
  <button>Hide</button><br/>

<div>c</div>
  <button>Hide</button><br/>

<div>d</div>
  <button>Hide</button><br/>

＆＃13;

jQuery - 动态地为每个DIV添加一个显示/隐藏按钮

1 个答案: