各要素ごとにjQuery関数を個別に実行する

Question

複数のタブナビゲーションを並行して実行するには、スクリプトに何を追加する必要がありますか？

私は小さなタブのナビゲーションを構築し、それに問題が発生しました。これはどのように修正するのですか？

以下のスクリプトをご覧ください。今あなたのコードが1セットとして、すべての​​要素に対して作用

$(document).ready(function() { 
 

 
    $('ul.material--switch li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

 
    $('ul.material--switch li').removeClass('active'); 
 
    $('.tab-content').removeClass('active'); 
 

 
    $(this).addClass('active'); 
 
    $("#" + tab_id).addClass('active'); 
 
    }) 
 

 
})

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="material--switch"> 
 
    <li class="active" data-tab="option1">option1</li> 
 
    <li data-tab="option2">option2</li> 
 
</ul> 
 

 
<div id="option1" class="tab-content active"> 
 
    show option1 
 
</div> 
 

 
<div id="option2" class="tab-content"> 
 
    show option2 
 
</div> 
 

 

 
<ul class="material--switch"> 
 
    <li data-tab="option3">option3</li> 
 
    <li class="active" data-tab="option4">option4</li> 
 
</ul> 
 

 
<div id="option3" class="tab-content"> 
 
    show option3 
 
</div> 
 

 
<div id="option4" class="tab-content active"> 
 
    show option4 
 
</div>

Answer 1

。あなたのコードには、あなたが行動したい別々のタブのセットがあるという兆候はありません。ここでは、各グループの周りに.container divを追加して、タブセットとその利用可能なオプションを含むようにしました。あなたの機能は.containerごとに別々に実行され、その内容に対してのみ機能します。

$(document).ready(function() { 
 

 
    $('.container').each(function() { 
 
    var self = $(this); // in the next line `this` will get taken over by the `li`: 
 
    self.find('.material--switch li').click(function() { 
 
     var tab_id = $(this).attr('data-tab'); 
 
     self.find('.active').removeClass('active'); 
 
     $(this).addClass('active'); 
 
     $('#' + tab_id).addClass('active'); 
 
    }); 
 
    }); 
 
    
 
});

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <ul class="material--switch"> 
 
    <li class="active" data-tab="option1">option1</li> 
 
    <li data-tab="option2">option2</li> 
 
    </ul> 
 

 
    <div id="option1" class="tab-content active">option1</div> 
 
    <div id="option2" class="tab-content">option2</div> 
 
</div> 
 

 
<div class="container"> 
 
    <ul class="material--switch"> 
 
    <li class="active" data-tab="option3">option3</li> 
 
    <li data-tab="option4">option4</li> 
 
    </ul> 
 

 
    <div id="option3" class="tab-content active">option3</div> 
 
    <div id="option4" class="tab-content">option4</div> 
 
</div>

Answer 2

ラップそれぞれが含むdiv要素に設定してからちょうどだけクリックされています要素の親内の要素をターゲットにあなたのjQueryを変更します。

$(document).ready(function() { 
 

 
    $('ul.material--switch li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 
    var parent = $(this).parent().parent(); 
 
    parent.find('ul.material--switch li').removeClass('active'); 
 
    parent.find('.tab-content').removeClass('active'); 
 

 
    $(this).addClass('active'); 
 
    parent.find("#" + tab_id).addClass('active'); 
 
    }) 
 

 
})

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
\t <ul class="material--switch"> 
 
\t <li class="active" data-tab="option1">option1</li> 
 
\t <li data-tab="option2">option2</li> 
 
\t </ul> 
 

 
\t <div id="option1" class="tab-content active"> 
 
\t show option1 
 
\t </div> 
 

 
\t <div id="option2" class="tab-content"> 
 
\t show option2 
 
\t </div> 
 
</div> 
 

 
<div class="container"> 
 
\t <ul class="material--switch"> 
 
\t <li data-tab="option3">option3</li> 
 
\t <li class="active" data-tab="option4">option4</li> 
 
\t </ul> 
 

 
\t <div id="option3" class="tab-content"> 
 
\t show option3 
 
\t </div> 
 

 
\t <div id="option4" class="tab-content active"> 
 
\t show option4 
 
\t </div> 
 
</div>