我可以映射数组并将变量转换为几个不同的值吗？

Question

I need to make variable i equal to 1,2,3,4. As this is then used as part of the name of div that needs to be hidden/shown.

Is there that this can be implemented easily? I have been trying with loops, mapping over array etc. Any help would be greatly appreciated.

function listenForIconModalChange() {
  // var modalNumbers = [1, 2, 3, 4];
  // for (i = 0; i <= modalNumbers.length; i ++);

  $('div[data-index^="icons_icon_"' + i + '"_modal_img"]').hide();
  $('div[data-index^="icons_icon_"' + i + '"modal_img_adobe"]').hide();
  $('div[data-index^="icons_icon_"' + i + '"_modal_imga"]').hide();
  $('div[data-index^="icons_icon_"' + i + '"_modal_copy"]').hide();
  $('div[data-index="icons_icon_"' + i + '"_modal"]').show();

  enableIconModalDropdown = $('select[name="icons_icon_' + i + '"modal"]');

  var enableIconModal = enableIconModalDropdown.val();
  if (enableIconModal == 1) {
    $('div[data-index^="icons_icon_"' + i + '"_modal_img"]').show();
    $('div[data-index^="icons_icon_"' + i + '"modal_img_adobe"]').show();
    $('div[data-index^="icons_icon_"' + i + '"_modal_imga"]').show();
    $('div[data-index^="icons_icon_"' + i + '"_modal_copy"]').show();
  }

  enableIconModal1Dropdown.change(function() {
    $('div[data-index^="icons_icon_"' + i + ']').hide();
    $('div[data-index="icons_icon_"' + i + ']').show();

    var enableIconModal = enableIconModal1Dropdown.val();
    if (enableIconModal == 1) {
      $('div[data-index="icons_icon_"' + i + ']').show();
    }
  });
}

Answer 1

You can use the ES6 template string, like this:

$(`div[data-index^="icons_icon_${i}_modal_img"]`);

Or if you want to keep your syntax, you have to remove some quotes:

$('div[data-index^="icons_icon_' + i + '_modal_img"]');