Как увеличить список oop и применить jQuery для изменения класса - PullRequest
Новая
       0

Как увеличить список oop и применить jQuery для изменения класса

0 голосов
/ 17 июня 2020

Я учусь javascript. В следующем примере я пытаюсь

  1. l oop по элементам списка, чтобы получить их исходный класс
  2. изменить его. (элемент списка, у которого был красный класс, изменится на зеленый класс и наоборот)

Также я хочу постоянно менять его, чтобы получить эффект анимации. Как сложить javascript и jQuery вместе?

Нужно ли устанавливать тайм-аут для каждого элемента списка? 

*<style>*
  .red{
        color:red;
    } 
    .green{
        color:green;
    }
*</style>*        




*<body>*
<ul class="list-inline-mb-0 ">
          <li  class="list-inline-item header red">C </li>
          <li class="list-inline-item header green">O</li> 
          <li class="list-inline-item header red">O</li> 
          <li class="list-inline-item header green">L</li> 

</ul>
*</body>*


*<script>*
  $(function()) {

    var myListElem = document.getElementsByClassName('li');

    $('li').each(function() {
    if(myListElem).hasClass("red"){           
     $(myListElem).addClass('green');
         }
    else{
        $(myListElem).addClass('red')
    }

    });  
*</script>*

1 Ответ

0 голосов
/ 17 июня 2020

Во-первых, li не класс - list-inline-item. Во-вторых, вы не пытаетесь перебирать здесь массив $('li').each(function()..., поскольку $('li') - это не то, как вы получаете элемент. В-третьих, даже исправление l oop и добавление повторения (setInterval()) не даст вам анимации, потому что вы только добавляете классы, а не удаляете их. В вашем примере, когда вы проверяете red, вы только затем добавляете green и получаете red green в качестве результирующего класса. Суммируя все сказанное, можно сделать что-то вроде этого: 

$(function() {

    var myListElem = document.getElementsByClassName('list-inline-item');
		setInterval(function(){
    for(let i = 0; i < myListElem.length; i++){
    let e = myListElem[i];
      if($(e).hasClass("red")){           
       $(e).addClass('green');
       $(e).removeClass('red');
           }
      else{
          $(e).removeClass('green');
          $(e).addClass('red');
      }
    }
	}, 3000);
  });
.red{
        color:red;
    } 
    .green{
        color:green;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline-mb-0 ">
          <li  class="list-inline-item header red">C </li>
          <li class="list-inline-item header green">O</li> 
          <li class="list-inline-item header red">O</li> 
          <li class="list-inline-item header green">L</li> 

</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...