CODEWITHSUNDEEP
javascriptjqueryhtmlcss
clyde correa
clyde correa

Reputation: 86

change color of child element onclick parent element in html

In the given snippet, I have given the code and I expect the result that on the parent div when I click again the default color should apply on the child element. but the condition is the code should be as minimal as possible.

need a solution(if possible) without .toggleclass, .toggle, .addclass, .removeclass.

thank you.

*EDITED Thank you so much all of you for your valuable answers. I appreciate that. motto=> improve your knowledge bank.

$('li').click(function() {
  $(this).children().css({
    "color": "red",
    "border": "2px solid red"
  });
})
.ancestors * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
  </script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)
      <li>li (direct parent)
        <span>span</span>
      </li>
      <li>li (direct parent)
        <span>span</span>
      </li>
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>
  </div>
</body>

</html>

Upvotes: 2

Views: 2711

Answers (6)

Antoine A&#239;ello
Antoine A&#239;ello

Reputation: 292

You can do without class like this if you want

$('li').click(function(){
	$(this).children().attr('data-red', "true");
})
.ancestors * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
[data-red="true"]{
  color:red;
  border: 2px solid red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
</script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
      <li>li (direct parent)
        <span>span</span>
      </li>
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

Upvotes: 0

Fahad Ahmed
Fahad Ahmed

Reputation: 44

Use toggleClass() for toggle multiple classes. You can use the below code it is working properly according to your needs.

$(document).ready(function () {
    $("li").click(function () {
        $("span").toggleClass("child");
    });
});
.ancestors * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.child {
    color: red;
    border: 2px solid red;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <title>Document</title>
</head>

<body class="ancestors">
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (grandparent)
            <li>li (direct parent)
                <span>span</span>
            </li>
            <li>li (direct parent)
                <span>span</span>
            </li>
            <li>li (direct parent)
                <span>span</span>
            </li>
        </ul>
    </div>

</body>

</html>

Upvotes: 0

Hadji
Hadji

Reputation: 106

You could use the .addClass function

$('.parentClass').addClass("new-class-for-parent");

Edited: With "need a solution(if possible) without .toggleclass, .toggle, .addclass, .removeclass.", you can also use .prop function like so:

$('.parentClass').prop("style","color:#f0f0f0;width:100px;");
//or
$('#parentClass').prop("class","class-for-this");

Upvotes: 0

Jatin Kumar
Jatin Kumar

Reputation: 41

Please check this code will help you without adding or removing any class or toggle. check this ( https://drive.google.com/file/d/1T0yVIuzEuXMDOzjvvyCuwSblEHNLRt-P/view )

   <!DOCTYPE html>
    <html>
     <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <style>
    .ancestors * { 
      display: block;
      border: 2px solid lightgrey;
      color: lightgrey;
      padding: 5px;
      margin: 15px;
    }
    </style>
    </head>

    <body class="ancestors">body (great-great-grandparent)
      <div style="width:500px;">div (great-grandparent)
        <ul>ul (grandparent)  
          <li>li (direct parent)
            <span>span</span>
          </li>
          <li>li (direct parent)
            <span>span</span>
          </li>
          <li>li (direct parent)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>
    </html>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li').click(function(){
          if ($(this).children().attr("style") != "") {
            $(this).children().attr("style","");
          }else{
            $(this).children().css({"color": "red", "border": "2px solid red"});
          }
        })
      })
    </script>

Upvotes: 1

iPramod
iPramod

Reputation: 109

You can check the element attribute "style" to identify color applied or not, check below code - 

$('li').click(function(){
    var is_color = $(this).children().attr('style');

    if (typeof is_color !== typeof undefined && is_color !== false) {
        $(this).children().removeAttr("style");
    }
    else {
        $(this).children().css({"color": "red", "border": "2px solid red"});
    }   
})

Upvotes: 0

bermick
bermick

Reputation: 129

Since you're using jQuery you can use .toggleClass to switch between two CSS classes, one with the new color and one with the default color. Here is the reference for toggleClass, you can see first demo example is doing what I understand that you want: https://api.jquery.com/toggleclass/

Upvotes: 7

Related Questions