Question

很抱歉，如果这是一个非常愚蠢的问题，但我刚刚制作了一个包含可切换的部分的表单。每个部分都有一个'.header'，点击它将在div部分执行slideToggle。

我想添加一个指向下方或侧面的三角形，让人们知道它是可以切换的。（即▶或▼）。

我在类'.arrowTog'的范围内有三角形

我获得了部分成功

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

当我点击一个交换的所有三角形时，我尝试了这个（这导致它们都没有旋转）：

 $('.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绑定到单击的元素，然后使用find在其中进行搜索：

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

Answer 2

你正在上课。你可能有许多具有相同类的元素，因此jQuery匹配所有这些元素并对所有这些元素进行转换。

使用上下文（All .arrowTog RIGHT INSIDE THIS NODE）： $('.header').on('click', function(evt) { if ($('.arrowTog', evt.target).text().contains('▼')){ $('.arrowTog', evt.target).text('▶'); }else{ $('.arrowTog', evt.target).text('▼'); } });

Answer 3

为什么不使用CSS？

.arrowTog:before {
    content: '▶';
}
.arrowTog.open:before {
    content: '▼';
}

然后

$('.header').on('click', function() {
    $(this).toggleClass('open');
});

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

3 个答案: