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
id
values 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