3

Preciso alterar meu código de forma que ao clicar em uma div, a div pai mude seu css. Por exemplo eu clico em um input dentro da div, e a div pai muda o seu css.

Possuo o seguinte código:

$(document).ready(function(){
  $(".tel, .email, #nome, .col-lg-6").click(function(){
      // A div é a com a classe .col-lg-6
      // O código que sei é esse $(this).css({"background-color":"red"}); mas preciso de um código que mude o css daquela div, que pelo qual possui o objeto que foi clicado.
  }
}

$(".tel, .email, #nome, .col-lg-6").click(function(){
    $(this).css("background-color","red");// código ao ser alterado
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="email">Email</div>
<div class="teste1">teste1</div>
<div class="email">email</div>
<div class="teste2">teste2</div>
<div class="tel">Tel</div>
<div class="teste3">teste3</div>
</div>
<div class="col-lg-6">
<div class="email">Email</div>
<div class="teste1">teste1</div>
<div class="email">email</div>
<div class="teste2">teste2</div>
<div class="tel">Tel</div>
<div class="teste3">teste3</div>
</div>

0

3 Respostas 3

1

Pode fazer o que quer, precisa selecionar o item pai com a função parent() quando clica nos elementos filhos:

//para pegar o click nos filhos da div
$('.tel, .email, .nome').click(function(){
  $('.col-lg-6').css('background-color', 'lightblue'); //volta o padrão
  $(this).parent('div').css('background-color', 'blue');
});

//para pegar o click na div
$('.col-lg-6').click(function(){
  $('.col-lg-6').css('background-color', 'lightblue'); //volta o padrão
  $(this).css('background-color', 'blue');
});
.col-lg-6{
  background-color: lightblue;
  padding: 20px;
  transition: all .5s;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="col-lg-6">
  <input type="text" class="tel">
  <input type="text" class="email">
  <input type="text" class="nome">
</div>

<div class="col-lg-6">
  <input type="text" class="tel">
  <input type="text" class="email">
  <input type="text" class="nome">
</div>

<div class="col-lg-6">
  <input type="text" class="tel">
  <input type="text" class="email">
  <input type="text" class="nome">
</div>

3
  • São várias divs com a mesma classe. Se eu usasse esse código ele mudaria o css de todas as divs com a classe "col-lg-6". 20/11/2017 às 18:20
  • O que preciso, é que de várias divs aquela que em um elemento dela for clicado, apenas aquela div que possui aquele elemento clicado, mude o seu css, ou seja, tenho várias divs com a mesma classe, e cada div tem um mesmo elemento com name diferente. Preciso que apenas aquela div que possui o elemento clicado altere seu css. 20/11/2017 às 18:26
  • Editei a resposta, veja agora 20/11/2017 às 18:30
0

Para acessar o elemento pai você pode utilizar o .parent() do Jquery para pegar a div "pai" da clicada e assim manipular seu CSS.

$(this).parent("div").css("background-color","red");

Segue abaixo exemplo funcionando:

$(".tel, .email, #nome, .col-lg-6").click(function(){
    $(this).parent("div").css("background-color","red");
});
#div1{
  background-color:blue;
}

#div2{
  background-color:green;
}

.email {
  width: 50%;
  margin:auto;
  background-color:orange;
}

.teste1 {
  width: 50%;
  margin:auto;
  background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-lg-6" id="div1">
  <div class="email">Email</div>
  <div class="teste1">teste1</div>
</div>
<br/>
<div class="col-lg-6"  id="div2">
  <div class="email">Email</div>
  <div class="teste1">teste1</div>
</div>

3
  • Na verdade não é esse o problema. Eu preciso que ao clicar em um dos itens uma div que encorpora todos, mude o css. 20/11/2017 às 18:14
  • Não consegui entender, tente especificar exatamente quais elementos deseja modificar após um determinada div ser clicada. Exemplo.: ao clicar em um div da classe x desejo que todos os elementos dessa classe sejam modificados. 20/11/2017 às 18:15
  • Ao clicar em um dos elementos das divs com a classe "col-lg-6", aquela div que contém o elemento que foi clicado seja alterado o css dela. 20/11/2017 às 18:28
-1

Use o parent() do Jquery com o seletor da classe 'mae' (.col-lg-6) que vc diz, e o focus() ao invés de click() já que se trata de inputs:

$('.tel, .email, .nome').focus(function(){
  $(this).parent(".col-lg-6").css('background-color', 'red');
});
.col-lg-6{
  background-color: blue;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-lg-6">
<input type="text" class="tel">
<input type="text" class="email">
<input type="text" id="nome">
<div>

<div class="col-lg-6">
<input type="text" class="tel">
<input type="text" class="email">
<input type="text" class="nome">
<div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .