Как объединить несколько скриптов в 1?

Question

[miadiva]

Здравствуйте. Помогите, пожалуйста, разобраться. Вопрос довольно глупый, но я устала искать, и вообще не знаю как правильно сформулировать вопрос.

Пытаюсь добавить карту на svg и нужно и чтобы при клике на polygon или path, добавлялся класс на соответствующий тег и наоборот.

Вот пример:

jsfiddle.net

.fil1 {fill:#C5C6C6;}
.fil4 {fill:#898989;}
.fil2 {fill:#5B5B5B;}
.fil3 {fill:#2B2A29;}
.polygon1.active {color:red;}
.polygon2.active {color:blue;}
.polygon3.active {color:green;}
.polygon4.active {color:orange;}
#polygon1.active {fill:red;}
#polygon2.active {fill:blue;}
#polygon3.active {fill:green;}
#polygon4.active {fill:orange;}

<div class="maplabels">
	<span class="polygon1 maplabel" onclick="">Polygon 1</span>
	<span class="polygon2 maplabel" onclick="">Polygon 2</span>
	<span class="polygon3 maplabel" onclick="">Polygon 3</span>
	<span class="polygon4 maplabel" onclick="">Polygon 4</span>
</div>
<svg viewBox="0 0 3780 5316">
	<g id="map">
		<polygon class="fil1" id="polygon1" points="598,1079 1648,1079 1648,2128 598,2128 "/>
		<polygon class="fil2" id="polygon2" points="1648,1687 2255,1687 2255,2736 1648,2736 "/>
		<polygon class="fil3" id="polygon3" points="1648,1079 2255,1079 2255,1687 1648,1687 "/>
		<polygon class="fil4" id="polygon4" points="598,2128 1648,2128 1648,2736 598,2736 "/>
	</g>
</svg>

jQuery(document).ready(function($){
    $('#polygon1').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon1').addClass('active');
    $('.polygon1').addClass('active');
  });
});
jQuery(document).ready(function($){
    $('.polygon1').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon1').addClass('active');
    $('.polygon1').addClass('active');
  });
});
jQuery(document).ready(function($){
    $('#polygon2').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon2').addClass('active');
    $('.polygon2').addClass('active');
  });
});
jQuery(document).ready(function($){
    $('.polygon2').on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon2').addClass('active');
    $('.polygon2').addClass('active');
  });
});

... и т.д.

И вот проблема, я не знаю как объединить эти скрипты в один...
Видимо нужно что-то в этом роде:

jQuery(document).ready(function($){
var el = $(this).val();
    $('.polygon'+el).on("click", function(e){
    $('.active').removeClass('active');
    $('#polygon'+el).addClass('active');
    $('.polygon'+el).addClass('active');
  });
});

но не знаю как применить такое.

Comments

[Arman]

проще отвечать, если код закидывают на какие сервисы, например, jsfiddle

Answer 1

[0xD34F]

Внутри каких элементов надо переключать класс, и что это за класс:

const parentSelectors = [ '.maplabels', '#map' ];
const activeClass = 'active';

Вот jquery, как вы и хотели:

$(document).on('click', parentSelectors.map(n => `${n} >`).join(','), e => {
  const index = $(e.currentTarget).index();
  parentSelectors.forEach(n => $(n)
    .children()
    .removeClass(activeClass)
    .eq(index)
    .addClass(activeClass)
  );
});

Или, к чёрту jquery:

const parents = parentSelectors.map(n => document.querySelector(n));

document.addEventListener('click', ({ target: t }) => {
  const parent = parents.find(n => n !== t && n.contains(t));
  if (parent) {
    const index = [...parent.children].findIndex(n => n.contains(t));
    for (const { children } of parents) {
      for (let i = 0; i < children.length; i++) {
        children[i].classList.toggle(activeClass, i === index);
      }
    }
  }
});

Comments

[miadiva]

Круто! Спасибо!