任意のjs/twigコードを簡素化するのに役立つことができますか？このコードは、売却される物件のフロアプランを示すいくつかのタブにリンクしています。指定されたaria-controlsは、
loop.index を含む floorLevel
というスーパーテーブルフィールドを参照します。たとえば、 [aria-controls = '{
{row.floorLevel}} {{loop.index}} ']
これらの名前を出力します。ユーザーがタブをクリックしたときに測定値に関する個別の情報も変更されるようになっていますが、それほど手作業ではありませんが、簡単な方法が必要ですか？
{% includejs %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='groundFloor1']" ).on( "click", function() {
$( "#dimsTarget1" ).addClass( "is-active" );
$( "#dimsTarget2" ).removeClass( "is-active" );
$( "#dimsTarget3" ).removeClass( "is-active" );
$( "#dimsTarget4" ).removeClass( "is-active" );
$( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='firstFloor2']" ).on( "click", function() {
$( "#dimsTarget2" ).addClass( "is-active" );
$( "#dimsTarget1" ).removeClass( "is-active" );
$( "#dimsTarget3" ).removeClass( "is-active" );
$( "#dimsTarget4" ).removeClass( "is-active" );
$( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='secondFloor3']" ).on( "click", function() {
$( "#dimsTarget3" ).addClass( "is-active" );
$( "#dimsTarget1" ).removeClass( "is-active" );
$( "#dimsTarget2" ).removeClass( "is-active" );
$( "#dimsTarget4" ).removeClass( "is-active" );
$( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='thirdFloor4']" ).on( "click", function() {
$( "#dimsTarget4" ).addClass( "is-active" );
$( "#dimsTarget1" ).removeClass( "is-active" );
$( "#dimsTarget2" ).removeClass( "is-active" );
$( "#dimsTarget3" ).removeClass( "is-active" );
$( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='basement5']" ).on( "click", function() {
$( "#dimsTarget5" ).addClass( "is-active" );
$( "#dimsTarget1" ).removeClass( "is-active" );
$( "#dimsTarget2" ).removeClass( "is-active" );
$( "#dimsTarget3" ).removeClass( "is-active" );
$( "#dimsTarget4" ).removeClass( "is-active" );
});
{% endfor %}
{% endincludejs %}
ベストアンサー
クラスごとに要素を選択し、HTML要素にカスタムデータ属性を与えることができます。
これが対応するdivを持つクリック可能なhtml要素である場合
<button data-id="dimsTarget4" class="myButton">
<div class="myContainer" id="dimsTarget4"></div>
あなたのjqueryは
$('.myButton').click(function(){
var containerId = $(this).data('id');
$('.myContainer').removeClass( "is-active" );
$('#'+containerId).addClass( "is-active" );
})
それは基本的にそれです。すべてのdivからクラスを削除し、 data-id
属性で指定されたdivに追加します。
あなたはあなたのJavaScript（これははるかに優れています）にtwig要素を必要とせず、あなたのtwigテンプレートのすべてを定義します。あなたのJavascriptは独立して動作します。あなたのhtmlを変更すると、Javascriptをそれほど変更する必要はなく、コードを再利用することができます
注：例としてボタンを使用しました。好きなクラス名やhtml要素を挿入することができます。あなたはあなたのhtmlの構造について言及していないので、私はボタンを使うことに決めました