Функция щелчка применяется ко всем элементам с одинаковым классом - PullRequest
Новая
       9

Функция щелчка применяется ко всем элементам с одинаковым классом

0 голосов
/ 17 января 2019

У меня есть 2 набора вкладок на моей странице, которые используют одни и те же классы. Мне нужно, чтобы моя функция щелчка использовалась только для того меню, которое щелкнуло, но вместо этого оно применяется к обоим. Я знаю, что ответ заключается в использовании «этого», но я не могу понять, как его подключить

HTML: 

<div className="tabbed-menu" id="tabs">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

<div className="tabbed-menu" id="tabs2">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

JS: 

 $(document).ready(function() {
    if (!$('[data-tab-item]').hasClass('active').length){
        $('li[data-tab-item]').first().addClass('active');
        $('div[data-tab-item]').first().addClass('active');
    }   
    $(".tab-item").click(function(){
        var tabNumber = $(this).attr('data-tab-item');
        $('[data-tab-item]').removeClass('active');
        $('[data-tab-item='+ tabNumber +']').addClass('active');
    });
});

Ответы [ 3 ]

0 голосов
/ 17 января 2019

Функция обратного вызова, которую вы передаете методу click, также может получать параметр в случае передачи данных события. Данные события имеют свойство с именем target. Ведьма - это узел, на котором произошло событие. Для вашего случая вы не должны делать это: $ (Это) но вместо этого что-то вроде: 

$(".tab-item").click(function(event){
  var tabNumber = $(event.target).attr('data-tab-item');
  $('[data-tab-item]').removeClass('active');
  $('[data-tab-item='+ tabNumber +']').addClass('active');
});
0 голосов
/ 17 января 2019

Используйте селектор >, который выбирает дочерний элемент выбранного элемента. parent>child

$(document).ready(function() {
    if (!$('#tabs>.tabb1>[data-tab-item]').hasClass('active').length){
    alert("s");
        $('#tabs>.tabb1>li[data-tab-item]').first().addClass('active');
        $('#tabs>.tabb1>div[data-tab-item]').first().addClass('active');
    }   
    $("#tabs2>.tabb2>.tab-item").click(function(){
        var tabNumber = $(this).attr('data-tab-item');
        $('#tabs2>.tabb2>[data-tab-item]').removeClass('active');
        $('#tabs2>.tabb2>[data-tab-item='+ tabNumber +']').addClass('active');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="tabbed-menu" id="tabs">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

<div className="tabbed-menu" id="tabs2">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>
0 голосов
/ 17 января 2019

closest() будет искать ближайшего родителя.С этого момента вы можете найти любой элемент в этом элементе. 

$(document).ready(function() {
  if (!$('[data-tab-item]').hasClass('active').length) {
    $('li[data-tab-item]').first().addClass('active');
    $('div[data-tab-item]').first().addClass('active');
  }
  $(".tab-item").click(function() {
    $this = $(this);
    $menu = $this.closest('.tabbed-menu');
    $menu.find('[data-tab-item]').removeClass('active');
    var tabNumber = $this.attr('data-tab-item');
    $menu.find('[data-tab-item=' + tabNumber + ']').addClass('active');
  });
});
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have 2 sets of tabs on my page that share the same classes. I need my click function to only apply to the tab-menu thats clicked, but instead it applies to both. I know the answer lies in using "this" but I can't figure out how to plug it in HTML:

<div class="tabbed-menu" id="tabs">
  <ul class="tab-list">
    <li data-tab-item="1" class="tab-item"><a href="javascript:void(0)">Active Section</a></li>
    <li data-tab-item="2" class="tab-item"><a href="javascript:void(0)">Item Two</a></li>
    <li data-tab-item="3" class="tab-item"><a href="javascript:void(0)">Item Three</a></li>
  </ul>
  <div class="tab-container">
    <div data-tab-item="1" id="tab1" class="tab-content">
      <p>Content Goes Here</p>
    </div>
    <div data-tab-item="2" id="tab2" class="tab-content">
      <p>Second Content Goes Here</p>
    </div>
    <div data-tab-item="3" id="tab3" class="tab-content">
      <p>Third Content Goes Here</p>
    </div>
  </div>
</div>

<div class="tabbed-menu" id="tabs2">
  <ul class="tab-list">
    <li data-tab-item="1" class="tab-item"><a href="javascript:void(0)">Active Section</a></li>
    <li data-tab-item="2" class="tab-item"><a href="javascript:void(0)">Item Two</a></li>
    <li data-tab-item="3" class="tab-item"><a href="javascript:void(0)">Item Three</a></li>
  </ul>
  <div class="tab-container">
    <div data-tab-item="1" id="tab1" class="tab-content">
      <p>Content Goes Here</p>
    </div>
    <div data-tab-item="2" id="tab2" class="tab-content">
      <p>Second Content Goes Here</p>
    </div>
    <div data-tab-item="3" id="tab3" class="tab-content">
      <p>Third Content Goes Here</p>
    </div>
  </div>
</div>
...