Javascript - How to make the date attribute of a li belong to another li

Asked

Viewed 110 times

0

I have the following html:

<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
    <li class="ford" data-answer="0,5">Ford</li>
    <li class="fiat" data-answer="2">Fiat</li>
    <li class="renault" data-answer="3">Renault</li>
    <li class="ferrari" data-answer="">Ferrari</li>
    <li class="honda" data-answer="4">Honda</li>
    <li class="chevrolet" data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
    <li class="edge">Edge</li>
    <li class="onix">Ônix</li>
    <li class="palio">Palio</li>
    <li class="sandero">Sandero</li>
    <li class="civic">Civic</li>
    <li class="fusion">Fusion</li>
    <li class="fusquinha">Fusquinha</li>
</ul>

I wanted to relate these lis through javascript. (Example: Make Honda belong to civic) I’m sorry if the doubt is stupid, but I haven’t been able to find an answer yet

javascript

  • what your intention with this?

  • Set the answers of the exercise to then be able to perform a function for when to click the wrong items and another for when to click the right ones. But for that, the lis have to be related

  • did not understand yet, try to clarify more your doubt.

  • I want to define the answers for this little exercise that I’m putting together, and for that, I used the date parameter to be able to relate them to the other table. I wish I could point out to javascript that li "Honda" belongs to li "civic". In the case of the Honda date-swer is 4. I wanted to show for the program that that date-Swer belongs to the civic li. I clarified a little?

  • It’s not clear enough, but from what I understand, you need to have a way to group the <li>s. Where appropriate, the <ul> does this. Place an attribute id in each <ul> (ex: <ul id="marcas-de-carro">) that you will be able to catch all the <li>s by <ul> father.

  • So I don’t need the date parameter?

  • By clicking on an item of the first <ul> what should happen ?

  • Nothing, only something should happen after he clicks on the first <ul> and then on the second.

Show 3 more comments

3 answers

0

You will need to know in advance who belongs to whom in order to relate. Example:

let marcas = [{
    marca: ' ford',
    modelo: 'Edge'
  }, {
    marca: ' ford',
    modelo: 'Fusion'
  }, {
    marca: ' fiat',
    modelo: 'Palio'
  }, {
    marca: ' renault',
    modelo: 'Sandero'
  }, {
    marca: ' ferrari',
    modelo: 'ferrari'
  }, {
    marca: ' honda',
    modelo: 'Civic'
  },
  {
    marca: ' chevrolet',
    modelo: 'Ônix'
  }, {
    marca: ' vw',
    modelo: 'Fusquinha'
  }
];

let carros = document.querySelectorAll('.second-column li');

// percorrendo cada elemento li
carros.forEach((carro) => {
  
  // filtra qual marca possui o modelo da li que está em foco
  // quando encontrar adiciona uma nova classe na li
  // com o nome da marca
  marcas.filter(i => i.modelo == carro.innerHTML).forEach(selecionado => carro.className += selecionado.marca )
})
<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
  <li class="ford" data-answer="0,5">Ford</li>
  <li class="fiat" data-answer="2">Fiat</li>
  <li class="renault" data-answer="3">Renault</li>
  <li class="ferrari" data-answer="">Ferrari</li>
  <li class="honda" data-answer="4">Honda</li>
  <li class="chevrolet" data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
  <li class="edge">Edge</li>
  <li class="onix">Ônix</li>
  <li class="palio">Palio</li>
  <li class="sandero">Sandero</li>
  <li class="civic">Civic</li>
  <li class="fusion">Fusion</li>
  <li class="fusquinha">Fusquinha</li>
</ul>

I added the same brand class to the model.

  • I understood the program until the line "Let cars = Document...". It could explain me better what the last lines of the program do exactly??

  • Edited @Pedrolucasflor, see if it’s clearer pf.

  • Fight bro, it was much clearer yes!!

  • Your code got interesting, I just didn’t like the repetition of the brands. I should do something like ford:fusion,edge; volks:fusca,gol... then with the selected brand the script would check the models assigned to the brand.

  • I actually thought about doing it this way @Davidsamm, but to filter I left it separate.

0


Here is an example of checking the response by searching for the value with comparison via regular expression due to the fact that it may contain several responses:

// Monta o Select para checar a relação
var $select = document.createElement('select');
var $firstLis = document.querySelectorAll('.first-column li');

for(var i=0; i<$firstLis.length; i++) {
  var $option = document.createElement('option');
  $option.innerHTML = $firstLis[i].innerHTML;
  $option.setAttribute('value', $firstLis[i].getAttribute('data-answer'));
  $select.appendChild($option);
};

var $secondLis = document.querySelectorAll('.second-column li');
for(var i=0; i<$secondLis.length; i++) {
  $secondLis[i].appendChild($select.cloneNode(true));
  $secondLis[i].appendChild(document.createElement('span'));
}

// Verifica as respostas
addListener(document.getElementById('check-answer'), 'click', function() {
  var $lis = document.querySelectorAll('.second-column li');
  
  for(var i=0; i<$lis.length; i++) {
    var validator = 'Incorreto';
    if(new RegExp("," + i + ",").test(',' + $lis[i].querySelector('select').value + ',')) {
      validator = 'Correto';
    }
    $lis[i].querySelector('span').innerHTML = validator;
  };
});

// Helper function addListener
function addListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  }
  else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = handler;
  }
}
<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
    <li class="ford" data-answer="0,5">Ford</li>
    <li class="fiat" data-answer="2">Fiat</li>
    <li class="renault" data-answer="3">Renault</li>
    <li class="ferrari" data-answer="">Ferrari</li>
    <li class="honda" data-answer="4">Honda</li>
    <li class="chevrolet" data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
    <li class="edge">Edge: </li>
    <li class="onix">Ônix: </li>
    <li class="palio">Palio: </li>
    <li class="sandero">Sandero: </li>
    <li class="civic">Civic: </li>
    <li class="fusion">Fusion: </li>
    <li class="fusquinha">Fusquinha: </li>
</ul>

<button id="check-answer">Verificar Resposta</button>

  • This answer would be perfect if it were in pure javascript :(. I’m sure the program would be much bigger, but I’m starting and I still don’t have much knowledge in jquery. But what I’m trying to do is something very similar to what you did

  • @Pedrolucasflor Switched to pure Javascript ;)

  • He improved too much, he removed my initial doubt, but I just didn’t understand the function of these lines "(var i=0; i<$lis.length; i++)"; What this does in the function?

  • @Pedrolucasflor These lines loop to perform the actions for each element, in this case, for each LI tag.

  • Aaah yes, thank you very much bro!

0

You want to put one list inside another, like the example:

<html>
<body>

<h2>Lista</h2>

<ul>
  <li>Honda</li>
  <li>Fiat
    <ul>
    <li>Palio</li>
    <li>Bravo</li>
    <li>Uno</li>
    <ul>
        <li> Novo </li>
        	<ul>
        	<li> 2017 </li>
                <li> 2018 </li>
                <ul>
                	<li> Versão SP </li>
                </ul>
        	</ul>
        <li> Way </li>
    </ul>
    </ul>
  </li>
  <li>Nissan</li>
  	<ul>
    	<li> Cerato </li>
        <li> Soul </li>
    </ul>
</ul>

</body>
</html>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.