-1

I'm calling a function on Click event to add a CSS class to an item in the list of elements with same class name.

Here's what I'm trying to achieve On the click of the button, I want to add the class .active to a particular logo image. Let's say at index 0 or 1

Please help me fix the issue.

document.ready(function() {
  function setActive() {
    $(".logo-slider .logos .logo")[0].addClass("active");
  }
})
.active {
  border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="setActive()">Mark Active </button>
<div class="logo-slider">
  <div class="logos row">
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
  </div>

</div>
Supercool
  • 453
  • 1
  • 4
  • 9
  • 1
    add an id="" instead and use it to find the element – NicoCaldo Sep 12 '22 at 11:42
  • `onclick="setActive"` you didn't call the function. change it to `onclick="setActive()"` – Vinod Liyanage Sep 12 '22 at 11:43
  • 2
    If you're using jQuery, don't use `onclick`; use jQuery's `on('click`, ...` Also, when you use indexers on jQuery objects, you get an `HTMLElement` back, which does not have an `addClass` function. Use `eq()` instead. – Heretic Monkey Sep 12 '22 at 11:43
  • The code snippet is producing an error because of variable scope. Have you checked your console for errors and attempted to resolve those errors? – David Sep 12 '22 at 11:44
  • 1
    Does this answer your question? [jQuery to loop through elements with the same class](https://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class) – Heretic Monkey Sep 12 '22 at 11:46
  • 1
    Also, `addClass` is a jQuery method, but `[0]` gets you the reference to the DOM element. You need to either proceed with DOM methods to add the class from there; wrap this into `$(...)` again first to get a jQuery object; or use https://api.jquery.com/eq/ instead of `[x]` – CBroe Sep 12 '22 at 11:47
  • I think you should add a script code inside tag – Muthulakshmi M Sep 12 '22 at 11:54
  • reinventing radio buttons – epascarello Sep 12 '22 at 11:58

2 Answers2

2

You can use nth-child() css property to select specific element. Check snippet below..

function setActive() {
    $(".logo-slider .logos .col:nth-child(2) .logo").addClass("active");
  }
.active {
  border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="setActive()">Mark Active </button>
<div class="logo-slider">
  <div class="logos row">
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
    <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div>
  </div>

</div>
Super User
  • 9,448
  • 3
  • 31
  • 47
0

Thanks for your help. Your comments were helpful. I found an alternate solution.

Here's how I did it.

$(".logo-slider .logos .logo")[0].classList.add("active");

Got this idea after reading some of your comments. Thanks.

Supercool
  • 453
  • 1
  • 4
  • 9