javascript / как установить одно и то же значение в nth-child 2-х классов - PullRequest
Новая
       12

javascript / как установить одно и то же значение в nth-child 2-х классов

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

https://codepen.io/jh-ko/pen/OBrMOO

 var table = [1, "red", 3, 
              4, "blue", 6];
  for (var i = 0; i < table.length; i += 3) {
 var x = table[i];
 var y = table[i+1];
 $(".Ali:nth-child(" + (x++) + ")").click(function() {
 $("div .me:nth-child(" + (x++) + ")").css("color", y);
});
}

- Вверху есть пример (codepen) .--

У меня есть 2 класса .Ali и .me

* 1008Прежде всего, я хочу иметь одинаковое значение nth-child для обоих классов.Например, когда я щелкаю nth-child (1) класса Ali, я хочу получить красный цвет в nth-child (1) моего класса.

, но в этом коде я получаю синий цвет...

Когда я кодирую его только с помощью номера, это работает хорошо. 

".Ali:nth-child(4)"
"div .me:nth-child(4)"

Моя цель: Когда я нажимаю на число (например, 3) в группе А, я хочуиметь цвет на том же номере в группе B ..

Ответы [ 2 ]

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

Можете ли вы запросить индекс элемента, по которому щелкаете, и сравнить его с индексом элемента, из которого вы хотите извлечь данные?

С помощью .index() вы можете найти, где в выбранном элементе существует его порядок.,С .eq() / :eq() вы можете нацеливать элементы по их индексу в своей группе. 

$('.me').click(function(){
  let i = $(this).index();
  i = i-1;
  console.log( $(`.ali:eq(${i})`).css('background-color') );
});
.ali, .me{
  height: 20px;
  width: 20px;
  display: inline-block;
  float: left;
  margin: 5px;
}

.me{ background-color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>

<div style="clear: both; width: 100%; "></div>

<div class="ali" style="background-color: red;"></div>
<div class="ali" style="background-color: rebeccapurple;"></div>
<div class="ali" style="background-color: blue;"></div>
<div class="ali" style="background-color: green;"></div>
<div class="ali" style="background-color: yellow;"></div>
<div class="ali" style="background-color: orange;"></div>
<div class="ali" style="background-color: red;"></div>
<div class="ali" style="background-color: rebeccapurple;"></div>
<div class="ali" style="background-color: blue;"></div>
0 голосов
/ 25 октября 2018

Прежде всего, вот рабочее решение: 

var table = ["red", "yellow", "pink", "blue", "green", "gold"];

$(".Ali").click(function() {
   var i = $(this).index();
   $("div .me").eq(i).css("color", table[i]);
 });

Ваша проблема - это переменная "x", которая принимает другое значение во второй раз, когда вы ее используете.

Порядоквыполнения это:

  • Первая итерация (для):
    1. i это 0
    2. x это таблица [0] = 1
    3. выназначить действие для ".Ali: nth-child (1)
    4. x is x ++ = 2
    5. y таблица [1] =" red "
  • Вторая итерация (для)
    1. i - 3
    2. x - таблица [3] = 4
    3. , для которой вы назначаете действие ".Ali: nth-child (4)
    4. x - x ++ = 5
    5. y - таблица [5] = "синий"
  • При первом нажатии
    1. х 5
    2. вы меняете цвет на $ ("div .me: nth-child (5)")
    3. цвет "синий"
  • При втором щелчке
    1. x равен 6, вы меняете цвет на $ ("div .me: nth-child (6)")
    2. цвет "синий"
  • И так далее ...

Если вы используете глобальные переменные, such как ваши x и y, каждое изменение является глобальным.

...