Блог

У меня есть карта, которая содержит несколько регионов с такими классами, как «регион-один», «регион-два» и т.д. У каждого из них есть соответствующий флажок с такими классами, как ‘переключить регион-один’, ‘переключить регион-два’.

Нажатие на каждую область или ее флажок добавит «активный» класс. Я достигаю этого с помощью приведенного ниже кода:

 $(function(){
  $("#toggle-region-one").change(function() {
    $("#region-one").toggleClass("active", this.checked)
  }).change();
});

$('#region-one').on('click', function() {
    $('#toggle-region-one').trigger('click');
});
 

Я добавляю больше регионов на карту, и я не хочу повторять этот же код снова для каждого из них. Возможно ли заменить каждый класс в jQuery так, чтобы он использовал префиксы «region-» и «toggle-«?

Чтобы при нажатии на любую область, начинающуюся с «region-«, также был установлен соответствующий флажок, начинающийся с «toggle-«?

Я также пробовал это, но он выбирает все регионы / флажки

 $('div[id^="region-"]').on('click', function() {
    $('input:checkbox[id^=toggle-]').trigger('click');
});

$(function(){
  $('input:checkbox[id^=toggle-]').change(function() {
    $('div[id^="region-"]').toggleClass("active", this.checked)
  }).change();
});
 

Я настроил здесь скрипку.

Я полагаю, что без вашего html-кода классы region-... находятся в теге div, а классы toggle-region-... — на входе тега.

Вы могли бы решить свою проблему с помощью функции .index

 // this function toggles the class active to the corresponding region
// following the checkbow clicked
$("input[class*=toggle-region-]).on("change", function(){
  var index = $("div[class^=toggle-region-]).index(this);
  $("div[class*=region-]).eq(index).toggleClass('active');
});

// this function is checking the corresponding checkbox
// following the region clicked
$("div[class*=region-]).on("click", function(){
  // i dunno if you want toggle active class in this case 
  // when you clicked region, but its easy to add...
  var index = $("div[class*=region-]).index(this);
  $("input[class*=toggle-region-]).eq(index).prop('checked', true);
});
 

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

 var id1 = ""; //Get checkbox ID
var id2 = ""; // Get Div ID

$(function() {
  $('[id^="toggle-region"]').change(function() {
    id1 = $(this).attr("id");
    id2 = id1.substring(id1.indexOf('-')   1);
    $("#"   id2).toggleClass("active", this.checked)
  }).change();
});

$("#"   id2).on('click', function() {
  $("#"   id1).trigger('click');
});
 

 var id1 = "";
var id2 = "";
$('[id^="toggle-region"]').change(function() {
  id1 = $(this).attr("id");
  id2 = id1.substring(id1.indexOf('-')   1);

  $("#"   id2).toggleClass("active", this.checked)
}).change();


$("#"   id2).on('click', function() {
  $("#"   id1).trigger('click');
}); 

 #region-one,
#region-two,
#region-three {
  background-color: #666;
  height: 100px;
  width: 100px;
  display: inline-block;
}

#map .active {
  background-color: red;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map">
  <div id="region-one"></div>
  <div id="region-two"></div>
  <div id="region-three"></div>
</div>


<ul>
  <li><input type="checkbox" name="region" value="region-one" id="toggle-region-one"><label for="toggle-region-one">Region one</label></li>
  <li><input type="checkbox" name="region" value="region-two" id="toggle-region-two"><label for="toggle-region-two">Region two</label></li>
  <li><input type="checkbox" name="region" value="region-three" id="toggle-region-three"><label for="toggle-region-three">Region three</label></li>
</ul> 

И это мое решение в ванили javascript . В решении используется forEach() метод. А также toggle() метод удаления класса, когда флажок снят. Я открыл ваши css и html.

 var region = document.querySelectorAll('.region');
var checkbox = document.querySelectorAll('ul input');
        
Array.from(checkbox).forEach(function(checkboxArray, i) {
    checkboxArray.addEventListener('click', function() {
      region[i].classList.toggle('active');
  });
}); 

 .region {
  background-color: #777;
  height: 100px;
  width: 100px;
  display: inline-block;
}

.active {
  background-color: red;
} 

 <div id="map">
  <div class="region" id="one"></div>
  <div class="region" id="two"></div>
  <div class="region" id="three"></div>
  <div class="region" id="four"></div>
  <div class="region" id="five"></div>
  <div class="region" id="six"></div>
  <div class="region" id="seven"></div>
</div>

<ul>
    <li><input type="checkbox" name="region" value="region-one" id="toggle-region-one"><label for="toggle-region-one">Region one</label></li>
    <li><input type="checkbox" name="region" value="region-two" id="toggle-region-two"><label for="toggle-region-two">Region two</label></li>
    <li><input type="checkbox" name="region" value="region-three" id="toggle-region-three"><label for="toggle-region-three">Region three</label></li>
    <li><input type="checkbox" name="region" value="region-four" id="toggle-region-four"><label for="toggle-region-four">Region four</label></li>
    <li><input type="checkbox" name="region" value="region-five" id="toggle-region-five"><label for="toggle-region-five">Region five</label></li>
    <li><input type="checkbox" name="region" value="region-six" id="toggle-region-six"><label for="toggle-region-six">Region six</label></li>
    <li><input type="checkbox" name="region" value="region-seven" id="toggle-region-seven"><label for="toggle-region-seven">Region seven</label></li>
</ul>