javascript - 使用 JS，如何换出特定的文本实例而不是所有实例？

Question

抱歉，如果这是一个非常菜鸟的问题，但我刚刚制作了一个包含可切换部分的表单。每个部分都有一个“.header”，单击该标题将在该部分 div 上执行幻灯片切换。

我想添加一个向下或侧面的三 Angular 形，让人们知道它是可切换的。 (即 ▶ 或 ▼)。

我在跨度中有一个三 Angular 形，其类为“.arrowTog”我取得了部分成功

  $('.header').on('click', function() {
      if ($('.arrowTog').text().contains('▼')){
          $('.arrowTog').text('▶');
      }else{
          $('.arrowTog').text('▼');
      }
  }); 

当我单击所有交换的三 Angular 形之一时，我尝试了此操作(这导致它们根本不旋转):

 $('.header').on('click', function() {
     if ($(this).prev('.arrowTog').text().contains('▼')){
         $(this).prev('.arrowTog').text('▶');
     }else{
         $(this).prev('.arrowTog').text('▼');
     }
 }); 

这是 HTML 示例

     <div class="header" style="cursor: pointer;">
         <span class="arrowTog">&#9654;&nbsp;</span>
         <b>Merchant</b>
     </div>
     <div class="searchContent" style="display:none;"> 

你知道我做错了什么吗？谢谢!

Answer 1

在您的第一个版本中，问题是您在页面中找到每个 .arrowTog。您可以利用以下事实:在单击处理程序中，this 绑定(bind)到被单击的元素，然后只需使用 find 在该元素中进行搜索。 :

$('.header').on('click', function() {
  var arrow = $(this).find('.arrowTog');
  if (arrow.text().contains('▼')){
    arrow.text('▶');
  } else {
    arrow.text('▼');
  }
});