Question

我在这里努力找到一个解决方案来选择具有相似类的div，以便删除当前（点击）元素上的某些类。

这是我工作的一个例子。当用户点击另一个项目时，我将尝试从fa-angle-up删除类panel-title的Twitter Bootstrap折叠功能。这样，当用户点击另一个项目时，它将改变箭头方向。

http://quadrifoglio-test.esy.es/sample/

PS。我相信我需要一些发泄听众，但我不知道哪一个以及如何使用它。谢谢！

这里是我正在使用的jquery的html结构。

     <div class="panel-group" id="accordion">
     <!-- Accordition -->
     <div class="panel panel-primary">
        <div class="panel-heading transition">
           <a data-toggle="collapse" data-parent="#accordion"
              href="#accordionOne">
              <h4 class="panel-title fa fa-angle-up">
                 <span class="month">oct</span>
                 <span>Hrvatski skup poduzetnika</span>
              </h4>
           </a>
        </div>
        <div id="accordionOne" class="panel-collapse collapse in">
           <div class="panel-body">
              <div class="main-event">
                 <a href="#">
                    <span>Main event</span> 
                    <img src="img/main_event.jpg">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                       sed do eiusmod tempor incididunt ut labore et dolore magna
                       aliqua.
                    </p>
                 </a>
              </div>
              <div class="events">
                 <span>Eventi</span>
                 <ul>
                    <li><a href="#">Skup amerikanaca podrijetlom iz Hrvatske s rodacima </a></li>
                    <li><a href="#">Branko ima nesto reci, policija zaustavlja vozace. Sta reci.</a></li>
                 </ul>
              </div>
           </div>
        </div>
     </div>

    <!-- jquery  -->

        $( ".panel-title" ).click(function() {
      $( this ).toggleClass( "fa-angle-up" );
    });

    $( ".panel-title.fa.fa-angle-up" ).click(function() {
      $( this ).toggleClass( "fa-angle-down" );
    });

Answer 1

由于以下错误，您的页面无效：

Uncaught SyntaxError: Unexpected token < 403.php:2
Uncaught Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:11
Uncaught ReferenceError: $ is not defined

您需要包含必要的脚本（如jQuery）。

更新

您正在绑定插入符号图标以单击面板上不可靠的侦听器。相反，您希望像这样绑定到引导事件：

function toggleCaret(e) {
    var $target = $(e.currentTarget),
        $div = $($target.find('.collapse')),
        $theLink = $target.find('a[data-toggle="collapse"]').parent(),
        $links = $('a[data-toggle="collapse"]').parent();

    function doUp() {
        $theLink.addClass('fa-angle-up');
        $theLink.removeClass('fa-angle-down');
    }

    function doDown() {
        $links.removeClass('fa-angle-up');
        $links.addClass('fa-angle-down');
    }

    doDown();
    doUp();
}

$('.panel').on('shown.bs.collapse', function (e) {
    toggleCaret(e);
});

FIDDLE

Answer 2

通常情况下，您可以将“可折叠”群体包裹起来，以便显示“＆＃39;并且隐藏了＆＃39;事件甚至会影响切换元素。

在你的情况下，我想你可以做到

$('.fa-angle-up').click(function() {
  $(this).removeClass('fa-angle-up');
});

$('.fa-angle-down').click(function() {
  $('.panel-title').removeClass('fa-angle-up');
  $(this).addClass('fa-angle-up');
});

但是，除非您使.panel-title元素成为管理崩溃行为的元素，否则这可能无效。目前，这是由他们的父母完成的。

编辑：仍然可以使用隐藏和显示的事件。

$(document).on('hidden', '.collapse', function () {
   var panel=$(this).closest('.panel');
   var paneltitle=$('.panel-title',panel);
   paneltitle.removeClass('fa-angle-up');
});

$(document).on('shown', '.collapse', function () {
   var panel=$(this).closest('.panel');
   var paneltitle=$('.panel-title',panel);
   paneltitle.addClass('fa-angle-up');
});

Answer 3

你根本就没有删除这些类..在某些时候你在同一个元素上同时具有fa-angle-down 和 fa-angle-up。

根据jQuery文档，唯一可能适合您的签名是：

$( "#foo" ).toggleClass( className, addOrRemove );

相当于：

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

我喜欢旧式的方式：

$(".panel-title").click(function() 
{
   if ($(this).hasClass("fa-angle-up"))
   {
      $(this).removeClass("fa-angle-up").addClass("fa-angle-down");
   }
   else
   {
       $(this).removeClass("fa-angle-down").addClass("fa-angle-up");
   }
});

如何选择具有相同类的div元素并对单击的元素执行某些操作

3 个答案:

更新