Изменить цвет фона div после нажатия

Я новичок в jQuery.Изменить цвет фона div после нажатия

Как изменить цвет фона div.card-header, когда я нажимаю кнопку (.selectBtn)?

У меня есть несколько коробок, подобных этому.

<div class="col-md-4"> 
    <div class="card bordered"> 
    <div class="card-header"> <span class="card-title">Item 1</span> </div> 
    <div class="card-content"> 
     <p>Lorem ipsum...</p> 
    </div> 
    <div class="card-action clearfix"> 
     <div class="pull-right"> <a href="#" class="btn btn-link black-text selectBtn">Select</a> </div> 
    </div> 
    </div> 
</div>

Что я пробовал:

<script charset="utf-8"> 
    $(document).ready(function() { 
    $('.selectBtn').click(function(event) { 
     // alert alert-danger 
     event.preventDefault(); 
     $(this).find('.card-header').css('background-color', 'red'); 
    }); 
    }); 
</script>

источник

2016-02-13 J. Doe

.card-header не вспомогательный элемент (ребенок) из .selectBtn, это больше похоже на дядю. Итак, вам нужно перевернуть его полностью, переместившись на него parent, а затем найдите соответствующий sibling.

$('.selectBtn').click(function(event) { 
    event.preventDefault(); 
    $(this).closest('.card-action') // selects the parent .card-action of .selectBtn, you can use .parent() too for that 
    .siblings('.card-header').css('background-color', 'red'); // selects the sibling .card-header of .card-action 
});

Пример: https://jsfiddle.net/DinoMyte/71hgeqnb/12/

источник

2016-02-13 00:27:46 DinoMyte

Угу. Не выглядел достаточно близко. Исправлено. Спасибо что подметил это. – DinoMyte

В своем сообщении я упомянул, что у меня есть несколько ящиков, и ваш код действительно выбирает все из них: https://jsfiddle.net/71hgeqnb/10/. Благодарю. –

@ J.Doe: Обновленный ответ – DinoMyte

и может это сделать,

добавить OnClick по ссылке и создать функцию, которая вызывает его <a href="#" class="btn btn-link black-text selectBtn" onclick="ChangeColor();">Select</a>

function ChangeColor(){ $('.card-header').css('background-color', 'red'); }

источник

2016-02-13 00:31:45 lifesoft

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script charset="utf-8"> 
    $(document).ready(function() { 
    $('.selectBtn').click(function(event) { 
     // alert alert-danger 
     event.preventDefault(); 
     $('.card-header').css('background-color', 'red'); 
    }); 
    }); 
</script> 

<body> 

<div class="col-md-4"> 
    <div class="card bordered"> 
    <div class="card-header"> <span class="card-title">Item 1</span> </div> 
    <div class="card-content"> 
     <p>Lorem ipsum...</p> 
    </div> 
    <div class="card-action clearfix"> 
     <div class="pull-right"> <a href="#" class="btn btn-link black-text selectBtn">Select</a> </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

источник

2016-02-13 00:47:12

Изменить цвет фона div после нажатия

ответ

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