Добавить класс по клику?

Я хочу добавить класс в div.color каждый раз, когда я нажимаю на h1.Добавить класс по клику?

Проблема в том, что я хочу, чтобы другой класс добавлялся в div.color, когда я нажимаю другой h1.

Когда я нажимаю <h1 data-class="blue">

<div class="color"> становится <div class="color blue">

Как я могу это сделать? Я новичок в JQuery, так что это довольно сложно для меня ...

<h1 data-class="blue">Blue</h1> 
<h1 data-class="green">Green</h1> 

<div class="color">I'm changing colour here.</div> 

<script> 
$('h1.color').on('click', function() { 
    $(this).css({"background":"attr('data-class')"}); 
}); 
</script>

источник

2016-10-11 Vera Jane

Добро пожаловать в StackOverflow Vera! Способ, которым это работает, состоит в том, что вы должны принять лучший ответ после того, как вы закончите просить .. есть некоторые отличные, чтобы выбрать из ниже. – FloatingRock

JQuery предоставляет addClass метод добавления классов к элементам. Он также предоставляет функцию data для доступа к пользовательским атрибутам данных. Ref: https://api.jquery.com/addclass/
https://api.jquery.com/data/

Вам также нужно написать CSS, чтобы определить цвет фона для каждого такого класса, который вы хотите добавить. Примером может служить

<style type='text/css'> 
    .blue { 
     background-color: #0000ff; 
    } 
</style>

Остальное должно быть легко.

источник

2016-10-11 06:08:32

Прежде всего, если вы хотите выбрать все h1-элементы, селектор должен быть «h1». Если вы используете «h1.color», вы пытаетесь найти h1-элемент с css-классом «color», которого у вас нет.

И если вы хотите добавить класс в цвет div, вам следует использовать jQuerys addClass-method.

Также стоит отметить, что вы, вероятно, следует обернуть все это в jQuery ready, чтобы быть уверенным, что дом готов, когда вы манипулировать им:

<h1 data-class="blue">Blue</h1> 
<h1 data-class="green">Green</h1> 

<div class="color">I'm changing colour here.</div> 

<script> 
    $(function() { 
     $('h1').on('click', function() { 
      $(".color").addClass($(this).data("class")); 
     }); 
    }); 
</script>

источник

2016-10-11 06:08:35 Esko

Не забудьте обернуть в '$ (function() {...});' – FloatingRock

@FloatingRock Спасибо, добавлено – Esko

@Esko Этот код добавит оба класса после каждого элемента 'h1', нажмите на' div.color 'элемент прав или нет? – itzmukeshy7

Попробуйте это;)

Я добавил синий и зеленый цвет для проверки это работает или нет.

$(function() { 
 
    $('h1.addClass').on('click', function() { 
 
    $('div.color').removeClass('blue green').addClass($(this).attr('data-class')); 
 
    }); 
 
});

.blue{ 
 
    color: #00F; 
 
} 
 

 
.green{ 
 
    color: #0F0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="addClass" data-class="blue">Blue</h1> 
 
<h1 class="addClass" data-class="green">Green</h1> 
 

 
<div class="color">I'm changing colour here.</div>

источник

2016-10-11 06:11:45 itzmukeshy7

Что делать, если более двух классов, я имею в виду, мы должны удалить все классы. что, если их 100.? что, если у нас нет имени класса? –

@AnuradhS На 'h1' нажмите нам не нужно беспокоиться о других классах. – itzmukeshy7

Я имел в виду, что когда вы нажимаете на h1, вы удаляете все доступные классы, прежде чем добавлять новый класс. Я спрашиваю, что, если там больше двух, чем «синий, зеленый, красный, оранжевый, желтый, фиолетовый и т. Д.», Тогда вам нужно удалить все. –

Я думаю, что это то, что вы ожидаете. каждый раз, когда пользователь нажимает на h1removeclass и add новый class. ниже - рабочая демонстрация. Я поставил предупреждение, чтобы вы поняли. надеюсь, это поможет вам.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 

 

 
</style> 
 

 
<h1 data-class="blue">Blue</h1> 
 
<h1 data-class="green">Green</h1> 
 
<h1 data-class="red">Red</h1> 
 

 
<div class="color">I'm changing colour here.</div> 
 

 

 
<body> 
 

 
<script type="text/javascript"> 
 

 
var myArray = []; // create an empty array to hold all class names, clicked by the user. 
 

 
$("h1").click(function(){ 
 
    var data_class_name = $(this).attr('data-class'); //get the class name of clicked h1 
 
    myArray.push(data_class_name); //put that class name into the array 
 
    alert(myArray); //print the array, then you can see what is added last. 
 

 

 
    if (myArray.length > 1) // check for the length of the array, if it is more than 1, then remove the second element from the end of the array, because it is the previous class everytime when user click on a new. 
 
    { 
 
    var getthelastElement = myArray[myArray.length -2]; 
 
\t alert(getthelastElement); 
 

 
\t $("div.color").removeClass(getthelastElement); // remove the previous classs 
 

 
\t $("div.color").addClass(data_class_name); // add the new class 
 

 
\t var div_added_class_name = $("div.color").attr('class'); // get the current class of the div. 
 
\t alert("div class names are :---> "+div_added_class_name); // print it from an alert tot get you an idea. 
 
    } 
 
    else // if the array length is less than 1, there are no class to remove. so only what you have to do is add current class. 
 
    { 
 
    \t $("div.color").addClass(data_class_name); 
 

 
\t var div_added_class_name = $("div.color").attr('class'); 
 
\t alert("div class names are :---> "+div_added_class_name); 
 
    } 
 

 
    
 

 
}); 
 

 

 
</script> 
 

 
</body> 
 
</html>

примечание: пояснения в комментариях. :) удачи и приятного дня.

источник

2016-10-11 06:49:36

Try This

var divToAddClass = $("div#color"); 
 
$('h1').click(function() { 
 
    var color = $(this).attr('data-class');  \t 
 
    divToAddClass.removeAttr('class').addClass('color ' + color); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 data-class="blue">Blue</h1> 
 
<h1 data-class="green">Green</h1> 
 

 
<div class="color" id="color">I'm changing colour here.</div>

источник

2016-10-11 07:04:55

Добавить класс по клику?

ответ

Смежные вопросы