javascript - Change clicked element (and all similar) to active / unactive -
i had problem formulation of topic. sorry if duplicate question.
i have on dozen containers 2 childs.
<div class="some"> <img id="1" class="pointer unactive" /> <img id="2" class="pointer active" /> </div> <div class="some"> <img id="3" class="pointer unactive" /> <img id="4" class="pointer active" /> </div> <div class="some"> <img id="5" class="pointer unactive" /> <img id="6" class="pointer active" /> </div> for example: when click img#3 want change other child (#1, #3, #5) active , clicked element , similes (#2, #4, #6) unactive.
let have class tells odd , even:
<div class="some"> <img id="1" class="pointer odd unactive" /> <img id="2" class="pointer active" /> </div> <div class="some"> <img id="3" class="pointer odd unactive" /> <img id="4" class="pointer active" /> </div> <div class="some"> <img id="5" class="pointer odd unactive" /> <img id="6" class="pointer active" /> </div> now, when .even clicked, even have active , odd have inactive classes , vice-versa:
$(".even").click(function () { $(".even").addclass("active").removeclass("unactive"); $(".odd").addclass("unactive").removeclass("active"); }); $(".odd").click(function () { $(".odd").addclass("active").removeclass("unactive"); $(".even").addclass("unactive").removeclass("active"); }); note: please not use
idvalues starting number.
working snippet
$(function () { $(".even").click(function () { $(".even").addclass("active").removeclass("unactive"); $(".odd").addclass("unactive").removeclass("active"); }); $(".odd").click(function () { $(".odd").addclass("active").removeclass("unactive"); $(".even").addclass("unactive").removeclass("active"); }); }); .unactive {background: #f99; width: 50px; height: 50px;} .active {background: #99f; width: 50px; height: 50px;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="some"> <img id="1" class="pointer odd unactive" /> <img id="2" class="pointer active" /> </div> <div class="some"> <img id="3" class="pointer odd unactive" /> <img id="4" class="pointer active" /> </div> <div class="some"> <img id="5" class="pointer odd unactive" /> <img id="6" class="pointer active" /> </div>
Comments
Post a Comment