切换时更改图标

Question

我有这段代码

＆＃13;

＆＃13;

jQuery(function($) {
    //After it toggle the content with this button
    $('.content_toggle').hide();
    $('.link-toggle').before('<i class="fa fa-caret-right"></i>');

    $(".link-toggle").click(function() {
        $(this).toggleClass('active');
        $(this).next(".project .content_toggle").slideToggle("slow");
        $('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
    });
    //Let's the magic applies <3
});

＆＃13;

i, h4 {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="project">
    <h4 class="link-toggle">Link 1</h4>

    <div id="" class="content_toggle">
        <p>Hello world</p>
    </div>
</div>

<div class="project">
    <h4 class="link-toggle">Link 2</h4>

    <div id="" class="content_toggle">
        <p>Hello world</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

它几乎可以使用，但是当我点击链接时，所有图标都会改变。

我希望当我点击第一个链接时，只有它的图标会发生变化。 当我点击第二个链接时，只有它的图标会改变。

谢谢你的帮助！

Answer 1

使用$(this)抓取当前元素，然后使用closest()向上导航到父级

$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');

＆＃13;

＆＃13;

jQuery(function ($) {


			//After it toggle the content with this button
			$('.content_toggle').hide();
			$('.link-toggle').before('<i class="fa fa-caret-right"></i>');

			$(".link-toggle").click(function () {
				$(this).toggleClass('active');
				$(this).next(".project .content_toggle").slideToggle("slow");

					$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
			});

			//Let's the magic applies <3
		});

＆＃13;

i, h4 {
  display: inline-block;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="project">
 <h4 class="link-toggle">Link 1</h4>
 <div id="" class="content_toggle"><p>Hello world</p></div>
</div>



<div class="project">
  <h4 class="link-toggle">Link 2</h4>
  <div id="" class="content_toggle"><p>Hello world</p></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在切换所有i的类，您需要在上下文中切换当前元素的类。因此，您可以使用.closest()导航到project类的元素。

使用

$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');

而不是

$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');

＆＃13;

＆＃13;

jQuery(function($) {


  //After it toggle the content with this button
  $('.content_toggle').hide();
  $('.link-toggle').before('<i class="fa fa-caret-right"></i>');

  $(".link-toggle").click(function() {
    $(this).toggleClass('active');
    $(this).next(".project .content_toggle").slideToggle("slow");

    $(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
  });


});

＆＃13;

i,
h4 {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="project">
  <h4 class="link-toggle">Link 1</h4>
  <div id="" class="content_toggle">
    <p>Hello world</p>
  </div>
</div>



<div class="project">
  <h4 class="link-toggle">Link 2</h4>
  <div id="" class="content_toggle">
    <p>Hello world</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;