Кнопка jQuery переключает одну и ту же кнопку в разных областях страницы

Question

Привет, переполнение стека!

Я пытаюсь решить проблему переключения кнопок jQuery.

Я использую функцию свертывания Bootstrap 3.3.7 для отображения нескольких (около 12) расширяемых разделов на странице. Функции свертывания прекрасно работают. Моя проблема, когда дело доходит до нажатия кнопки, которую я бы хотел обработать с помощью jQuery. Кнопка должна переключаться между двумя строками текста («Развернуть историю» и «Свернуть историю») вместе с потрясающей по шрифту морковкой с наклоном вверх, которая переключается между вверх и вниз при расширении или сворачивании раздела.

С моей первой попыткой, я уверен, что есть лучший способ, но это то, что я мог придумать в моей неопытной голове - каждый раз, когда я нажимаю кнопку «Развернуть историю», все «Развернуть историю» кнопки меняются.

По какой-то причине я не могу обернуть голову, чтобы каждая кнопка, которую нажимают, была уникальной. Я подумал, что, может быть, я смогу каким-то образом использовать .attr('aria-controls'); для нацеливания на конкретный экземпляр кнопки, потому что они уникальны для каждой кнопки на странице.

В конце мне нужно всего лишь нажать кнопку, чтобы текст сменился морковкой вверх / вниз.

Я знаю, что JS Fiddle работает не совсем так, как у меня, надеюсь, он достаточно близко, чтобы передать то, что я пытался сделать. Пожалуйста, помогите мне найти лучшее решение для jQuery. Я ценю ваши предложения! Спасибо!

у меня в основном работает

JSFiddle

, надеюсь, поможет проиллюстрировать, что я пытаюсь сделать и с какой проблемой я сталкиваюсь.

Answer 1

1) нацеливание на определенную складывающуюся кнопку по классу. Просто создайте одну ... скажем, ".chevron-toggle" 2) заставить скрипт jquery найти значение этой конкретной кнопки с этим конкретным классом, используя .this 3) переключить класс внутри этого jquery.

/*------------- css ------------*/
.rotate-chevron{
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.rotate-chevron.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*------------- html ------------*/


<div  class="chevron-toggle accordion-toggle collapsed" data-toggle="collapse" data-parent="#Accordion" data-target="#content_inside" aria-expanded="false">
     <h4>
       Edit Info 
       <i class="rotate-chevron fa fa-chevron-down"></i>
     </h4>
</div>

<div id="content_inside" class=" collapse" aria-expanded="false">
hello
</div>


//JQuery Chevron rotation
$(document).ready(function() {
$('.chevron-toggle').click(function(e) {
      $(this).find(".rotate-chevron").toggleClass("down");  
  });

});

Answer 2

Посмотрите, выводит ли вас приведенный ниже пример на правильный путь:

DEMO:

jQuery(function ($) {
  $('a.collapse-trigger').on('click', function () {
    var $this = $(this);
    
    if($($this.attr('href')).is(":visible")) {
      $($this.attr('href')).slideUp();
      $this.find('.col-txt')
        .hide()
        .siblings('.exp-txt')
        .show();
    } else {
      $($this.attr('href')).slideDown();
      $this.find('.exp-txt')
        .hide()
        .siblings('.col-txt')
        .show();
    }
  });
});

.col-txt {
 display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- First Title -->
<div class="container-wrapper container">
  <div class="row">
    <div class="col-md-12 story-content">
        <h1 class="mb-2 mt-5">Our Team</h1>
    </div>
  </div>
</div>

<!-- First Story -->
<div class="collapse" id="c11">
  <div class="container">
	  <div class="row">
		  <div class="col-md-12">
			  <!-- Nav tabs -->
			  <ul class="nav nav-tabs red text-center" role="tablist">
				  <li role="presentation" class="active float-none d-inline-block"><a href="#CFT_Staff" aria-controls="CFT_Staff" role="tab" data-toggle="tab">CFT Staff</a></li>
					<li role="presentation" class=" float-none d-inline-block"><a href="#Trustees" aria-controls="gifts" role="tab" data-toggle="tab">Trustees</a></li>
					<li role="presentation" class=" float-none d-inline-block"><a href="#Advisory_Council" aria-controls="Advisory_Council" role="tab" data-toggle="tab">Advisory Council</a></li>
			  </ul>
				<!-- Tab panes -->
				<div class="tab-content sort-by-team">
				  <div role="tabpanel" class="tab-pane fade in active" id="CFT_Staff">
					  <div class="row mb-5">
						  <div class="col-sm-3">
							  <span class="fs-16 text-uppercase fw-600 d-inline-block pb-4 mt-5">Sort by team:</span>
								<a class="d-block mb-2 fs-16 fw-600 active" href="#">Leadership</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Donor Services & Relationships</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Finance & Administration</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Philanthropy & Grants</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Educate Texas</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Communications</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Nort Texas Giving Day & Gift Processing</a>
                <a class="d-block mb-2 fs-16 fw-600" href="#">View All Staff</a>
						  </div>
							<div class="col-sm-9 staff-list">
							  <div class="row mt-5">
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_DaveScullin.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">David J. Scullin</span>
										<span class="fs-14 d-block text-center pos-title">President & CEO</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_BethBull.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Elizabeth W. Bull</span>
										<span class="fs-14 d-block text-center pos-title">Senior Vice President and Chief Financial Officer</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_JohnFitzpatrick.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">John Fitzpatrick</span>
										<span class="fs-14 d-block text-center pos-title">Executive Director, Educate Texas</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_SarahSnelson.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Sarah Cotton Nelson</span>
										<span class="fs-14 d-block text-center pos-title">Chief Philanthropy Officer</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_MonicaEgertSmith.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Monica Egert Smith</span>
										<span class="fs-14 d-block text-center pos-title">Chief Relationships Officer</span>
                  </div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_SusanSwan-Smith.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Susan Swan Smith</span>
										<span class="fs-14 d-block text-center pos-title">Chief Giving Day Officer</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/gtang.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">George Tang</span>
										<span class="fs-14 d-block text-center pos-title">Managing Director, Educate Texas</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="Trustees">...</div>
					  <div role="tabpanel" class="tab-pane fade" id="Advisory_Council">...</div>
					</div>
				</div>
			</div>
		</div>
</div>

<!-- First Story Expand -->
<div class="border-bottom-med-gray">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<a class="dark-gray-text pt-3 pb-6 d-inline-block fs-14 text-uppercase btn-expand-story collapse-trigger" href="#c11" aria-expanded="false" aria-controls="c11">
          <span class="exp-txt">Expand</span>
          <span class="col-txt">Collapse</span>
          Story
          <i class="pl-1 fa fa-angle-down" aria-hidden="true"></i><i class="pl-1 fa fa-angle-up" aria-hidden="true"></i>
        </a>
			</div>
		</div>
	</div>
</div>

<!-- Second Title -->
<div class="container-wrapper container">
  <div class="row">
    <div class="col-md-12 story-content">
        <h1 class="mb-2 mt-5">Introducing the New CFTexas.org</h1>
    </div>
  </div>
</div>

<!-- Second Story -->
<div class="collapse" id="c12">
      <div class="container">
				<div class="row pt-4">
					<div class="col-sm-6">
						<p>Our website has been completely redesigned with you in mind, to make giving easier, more effective and more enjoyable than ever before. Get inspired by browsing our library of impact stories, stay up-to-date on our community impact initiatives, meet our esteemed CFT experts and trustees, view upcoming events and more. Take a look around an... [missing full info]</p>
            <a href="https://www.cftexas.org/" class="btn btn-text text-left mw-200 mb-0 d-block mt-5 fs-16" role="button"><span><span class="text-uppercase">Visit our new site</span></a>
					</div>
					<div class="col-sm-6">
						<img class="img-responsive mx-auto" src="../annual-report/images/laptop.jpg">
					</div>
				</div>
			</div>
</div>

<!-- Second Story Expand -->
<!-- First Story Expand -->
<div class="border-bottom-med-gray">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<a class="dark-gray-text pt-3 pb-6 d-inline-block fs-14 text-uppercase btn-expand-story collapse-trigger" href="#c12" aria-expanded="false" aria-controls="c11">
          <span class="exp-txt">Expand</span>
          <span class="col-txt">Collapse</span>
          Story
          <i class="pl-1 fa fa-angle-down" aria-hidden="true"></i><i class="pl-1 fa fa-angle-up" aria-hidden="true"></i>
        </a>
			</div>
		</div>
	</div>
</div>

Вы на правильном пути, но вам нужно несколько модификаций. Вместо нацеливания на все элементы с определенным именем класса, вы можете использовать некоторые селекторы jQuery, такие как .find() и .siblings(), чтобы найти только элементы, связанные с той же кнопкой истории, что и кнопка, по которой вы щелкнули. Это позволяет вам изменять текст и расширять истории по одному, а не иметь обработчик, который влияет на все истории одновременно.

В качестве примечания я удалил атрибут data-toggle="collapse" из ссылок и добавил класс collapse-trigger. Функциональность Bootstrap 3 по умолчанию мешала клиентскому событию click. Для того, чтобы сделать пользовательский обработчик, мне нужно было остановить функционирование по умолчанию.