Question 183496 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How can I make an array of all elements with the same className in jQuery and apply the style to it?

So, I’m making this site on WordPress, and I want in a card carousel for each item that has been selected the title to be different color, but I’m new to this and I don’t quite catch up with it.

So my question is can I make an array of className, because all of the items in carousel have the same class, but when the one item is selected, the all of the other items should be white or the color that it is i got this snippet here, this is jQuery for connected items and templates, you’ll figure it out. I tried to assign "id" onclick but its not working for me here is the code that is working for connected elements.

I was adding array function and tried to change foreach but I’m still new in js and jQuery so I just made a mess.

jQuery(function($) {

  $('[data-showme]').on('click', function() {
    var showme = $(this).attr('data-showme')
    $('.all-content').hide()
    $('#' + showme).show()
  })

  $("#slide-selected-1").on('click', function() {
    $(".all-content").hide()
    $("#smartedgemain").show()
  })
  
})
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Tags:

3

Answers


  1. 0

    When working with classes in HTML to JavaScript, it’s an array of classes.

    So, to potentially implement what you’re looking for, something along the lines of:

    const elements = document.getElementsByClassName("example");

for (int i = 0; i < elements.length;i++) {
elements[i].addEventListener("click", function () {
   // your code
});
}

    `

    Explanation:

    1). Store the array of class names in the elements variable.

    2). iterate over the array via for-loop.

    3). attach event handler to each index and then you could have each index onClick call a function to manipulate each element.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    Since you are looking to toggle a style on click, I have two solutions.

    One uses the :focus pseudo class so it styles the focused matching element. The other one toggles a class that changes the color. First, it removes the class from anything already clicked, then it adds it to the currently clicked element.

    jQuery('.addclass').on('click', function() {
  jQuery('.addclass.clicked').removeClass("clicked");
  jQuery(this).addClass("clicked");
})
    a{
  display:block;
  font-weight:bold;
  color:green;
  margin-bottom:10px;
  text-decoration:none;
}

.focusme:focus{
  color:blue;
}


a.clicked{
  color:red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='focusme' href="#">Focus pseudo-class</a>
<a class='focusme' href="#">Focus pseudo-class</a>
<a class='addclass' href="#">Toggle Class</a>
<a class='addclass' href="#">Toggle Class</a>
    Login or Signup to reply.
  3. 0

    If you only need to select the first/clicked card and highlight it and the rest will be in default color, this is the solution I’ve made…

    In Javascript,

     document.querySelectorAll('.card').forEach(function(element){
      element.addEventListener("click", function(e){
             document.querySelectorAll('.card').forEach(siblings => siblings.style.opacity="0.4")
      element.style.opacity = "1"
      element.style.transition = "ease-in-out 0.4s"
  })
})

    In JQuery:

    $(document).on('click', '.card', function () {
    $(this).next().show().siblings('.card').css('opacity', '0.4');
    $(this).css({ opacity: 1, transition: 'ease-in-out 0.4s'})
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search