Сравнивать внутри элементов из 2 разных массивов и дает действия? - PullRequest
Новая
       18

Сравнивать внутри элементов из 2 разных массивов и дает действия?

0 голосов
/ 25 августа 2018

Есть ли способы сравнить индексные числа из 2 разных массивов?

Вот что я хочу сделать: 

if i[0] == k[0] {
    //give some action to k[0]
} else if i[1] == k[1] {
    // give some action to k[1]
}

... и т. Д.

Я мог бы сделать каждую функцию от 0 до 4, чтобы решить мою проблему таким образом, но тогда код был бы слишком длинным и нечитаемым.Я хочу максимально оптимизировать свой код.

Я написал такой код, но он не работает так, как я хочу.Все k продолжают действовать, когда я наводю на них одну из групп блоков.

enter image description here

И это мой код: 

var i = $('#boxgroup').children()
var k = $('#panelgroup').children()
  $(i).each(function() {
    $(this).hover(function() {
      if($(i == k)){
         $(k).stop().animate({height: '500px'})}
    }, function(){
         $(k).stop().animate({height: '200px'})
    })
})


  #boxgroup{
    width: 600px;
    height: 200px;
    border: 1px solid black;
    clear: both;
  }
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    float: left;
    position: relative;
    top: 0px;
    margin: 10px;
    }
  .panelgroup {
    clear: both;
  }
  .panel {
    width: 200px;
    height: 200px;
    border: 1px solid gray;
    top: 400px;
    float: left;
  }
<div id="boxgroup">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
<br>
<div id="panelgroup">
  <div class="panel">panel1</div>
  <div class="panel">panel2</div>
  <div class="panel">panel3</div>
  <div class="panel">panel4</div>
</div>

1 Ответ

0 голосов
/ 25 августа 2018

Звучит так, будто вы хотите навести курсор на ребенка в #boxgroup, чтобы сделать эквивалентного ребенка в #panelgroup больше. Если это так, вам не нужна серия if с, вам просто нужен индекс элемента: 

$('#boxgroup > *').hover(
    function() {
        var index = $(this).index(); // Returns its index within boxgroup
        $("#panelgroup > *:eq(" + index + ")").stop().animate({height: '500px'});
    },
    function() {
        var index = $(this).index(); // Returns its index within boxgroup
        $("#panelgroup > *:eq(" + index + ")").stop().animate({height: '200px'});
    }
);

Live Пример: 

$('#boxgroup > *').hover(
    function() {
        var index = $(this).index(); // Returns its index within boxgroup
        $("#panelgroup > *:eq(" + index + ")").stop().animate({height: '500px'});
    },
    function() {
        var index = $(this).index(); // Returns its index within boxgroup
        $("#panelgroup > *:eq(" + index + ")").stop().animate({height: '200px'});
    }
);
#boxgroup{
    width: 600px;
    height: 200px;
    border: 1px solid black;
    clear: both;
  }
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    float: left;
    position: relative;
    top: 0px;
    margin: 10px;
    }
  .panelgroup {
    clear: both;
  }
  .panel {
    width: 200px;
    height: 200px;
    border: 1px solid gray;
    top: 400px;
    float: left;
  }
<div id="boxgroup">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
<br>
<div id="panelgroup">
  <div class="panel">panel1</div>
  <div class="panel">panel2</div>
  <div class="panel">panel3</div>
  <div class="panel">panel4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

См:

...