2017-01-17 2 views
-2

На данный момент у меня есть 2 кнопки, которые должны менять цвет фона на желтый, другой на красный, однако по какой-то причине он, похоже, не работает, ошибки нет в консоли, но все равно нет результата:JQuery изменение цвета фона с помощью кнопки

HTML:

<button class="btn btn-default form-control margin" value="yellow" class="color">Background</button> 
    <button class="btn btn-default form-control margin" value="red" class="color">Background</button> 

JS:

$(document).ready (function(){ 
     $('.color').click(function(){ 
     $('#content-link2 > #content').css({"background-color": ($(this).attr("value")) 
     }); 
    }); 
}); 

Остальной HTML:

<div id="content-link2"></div> 

А внутри что Див другой страницы HTML впрыскивается который:

<!DOCTYPE html> 

<html> 
<head> 
    <title>Template 1</title> 
     <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div class="logo"> 
     <img class="images" id="image" src="#" alt="Your Logo"/> 
    </div> 
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div> 
<div id="comments"> 
<form name="forma"> 
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5"> 
Comments here... 
</textarea><br> 
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"--> 
<div id ="editTxt" class="refresh" contenteditable="true"> 
<p>This text can be by the user.</p> 
</div> 
</div> 
</form> 
</body> 
</html> 
+0

share full html –

+0

У вас есть синтаксическая ошибка '$ ('# content'). Css ({" background-color ": $ (this) .attr (" value ")})' – Satpal

+0

try '$ ('# content')' –

ответ

1

Попробуйте это: (добавить только один атрибут класса для каждого тега)

<button class="btn btn-default form-control margin color" value="yellow">Background</button> 
<button class="btn btn-default form-control margin color" value="red">Background</button> 

Тогда:

$(document).ready (function(){ 
    $('.color').click(function(){ 
    $('#content').css("background-color",$(this).attr("value")) 
    }); 
    }); 
+0

'color' Указывает, что цвет текста не влияет на цвет фона. правильное свойство 'background-color' – Manish

+0

i correct it check now –

+0

Работает блестяще! вау, я действительно замечательный вопрос в том, что у меня было 2 атрибута класса –

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