Как задать массив [i] [0] каждому элементу li? - PullRequest
Новая
       24

Как задать массив [i] [0] каждому элементу li?

0 голосов
/ 21 октября 2018

Основная концепция моего кода заключается в том, что при наведении курсора на один из элементов li функция сравнивается между индексом li и индексом массива.Когда они совпадают, элементы массива отображаются на элементе li.

И я ожидаю, что , если массив включает / имеет какие-либо другие массивы , такие как эта форма [... 'Whale', ['Dog', 'Wolf']], тогда li элемент показывает только 0 из внутреннего div (creatures[i][0] в моем случае.) Таким образом, окончательная форма будет выглядеть как 0-0, 1-1, 2-2 [0], 3-3 [0] ипродолжается. 

function customArray() {
  var array = Object.create(Array.prototype);
      array = Array.apply(array, [null, ...arguments]);
  return (array);
}

var creatures = new customArray([
    ['Seal', 'Whale', ['Dog', 'Wolf', 'Hound'], ['Cat', 'Lion', 'Jaguar'], 'Bear'],
    ['1', '2', ['3', '30', '300'], ['4', '40', '400'], '5']
]);

  $('div ul li').on('mouseenter', function() {
    var i = $(this).index() + 1;
        j = i;
    creatures.forEach((items, index) => {
      var breakPoint = Array.isArray(items), result;
      result = (breakPoint) ? true : false;
      if (i = j) {
        for(n = 0; n < creatures.length + 1; n++) {
          if(result) {
            $('nav ul li:nth-child('+ n +')').html(items[i-1][0]);
          } else {
            $('nav ul li:nth-child('+ n +')').html(creatures[i]);
            console.log('false')
          }
        }
      }
    })
  })
  * {
    margin: 0;
  }
   div {
     position: relative;
     width: 100%;
     height: 100px;
     opacity: 0.5;
     display: flex;
     flex-flow: row;
     z-index: 1;
   }
   ul {
     display: flex;
   }
   li {
     display: flex;
     flex-flow: column;
     justify-content: center;
     list-style: none;
     color: white;
     padding: 0 20px;
   }
   nav {
     position: relative;
     width: 100%;
   }
   .black {
     background-color: black;
   }
   .orange {
     background-color: orange;
   }
<div class="black">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
    <li>menu 5</li>
  </ul>
</div>
<nav class="orange">
  <ul>
    <li>smenu 1</li>
    <li>smenu 2</li>
    <li>smenu 3</li>
    <li>smenu 4</li>
    <li>smenu 5</li>
  </ul>
</nav>
    
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

Этот код имеет проблему, и появляется сообщение об ошибке Cannot read property '0' of null at forEach.creature..

Любые советыбудь рад.

Спасибо.

...