@eldar_web

Вопрос по JS (jQuery) + HTML, как можно это решить по описанию?

Это не школьная или тому подобная задача. Я просто хочу понять как решается. У меня есть знания jQuery, но вот по описанию не могу понять как решается. А описание такое:

С помощью управления всплытием, тригером и функцией

function writeLetter() {
console.log( $(this).data('letter') );
}

напишите в консоле браузера символы в атрибутах "data-letter", которые соответствуют
слову 'problem' в аттрибутах "data-index".

Структура html странички

<html>
 <head>
  <title>test</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 </head>
 <body>
  <div data-index="e" data-letter="t">
   <div data-index="r" data-letter="r">
    <div data-index="p" data-letter="p">
     <div data-index="l" data-letter="i">
      <div data-index="b" data-letter="f">
       <div data-index="o" data-letter="o">
        <div data-index="m" data-letter="!">
         <a href="#">click</a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <script type="text/javascript">
  // code here
  </script>
 </body>
 </html>


( jsfiddle.net/0prvj0c2 )
  • Вопрос задан
  • 2351 просмотр
Решения вопроса 1
thewind
@thewind
php программист, front / backend developer
var pairs = {};
$('[data-letter]').each(function(){
    var data = $(this).data();
    pairs[ data.index ] = data.letter;
});
console.log(pairs.p + pairs.r + pairs.o + pairs.b + pairs.l + pairs.e + pairs.m); // profit!
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@lnked
<script type="text/javascript">
  var word = 'problem', index, data = {}, result = [];

  // Собираем данные с дата аттрибутов
  $('div').each(function(i){
    data[$(this).data('index')] = $(this).data('letter')
  });
  
  // Цикл по слову
  for(index in word)
  {
    console.log(data[word[index]]);
    result.push(data[word[index]]);
  }
  console.log(result); // profit!
</script>
Ответ написан
Комментировать
@sainttechnik
Frontend developer, в прошлом админ
Вроде под условия задачи подходит:
var word = ['p', 'r', 'o', 'b', 'l', 'e', 'm'];

$('div').on('click', function(e){
    e.stopPropagation();
    writeLetter.apply(this);
});

$('a').on('click', function(e){
    e.stopPropagation();
    $.each(word, function(index, letter){
        $('[data-index="' + letter + '"]').trigger('click');
    });
});

function writeLetter() {
    console.log( $(this).data('letter') );
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы