CODEWITHSUNDEEP
javascriptjquery
user10202925
user10202925

Reputation:

How to rewrite JS function on jQuery properly

I'm looking for a way to rewrite this function mostly on jQuery, and put var list inside the function to stop it's pollution in .js file.

I'm having difficulties with the upper part, can't figured out how to rewrite properly var's and click event listener to expected result.

Can somebody take a look and help me with that?

var d1 = document.getElementsByClassName("div_1");

var $d2 = $(".div_2");

var i;

for (i = 0; i < coll.length; i++) {
  d1[i].addEventListener("click", function() {
    this.classList.toggle("active");

    var content = this.nextElementSibling;

    if (content.style.display === "block") {
        content.style.display = "none";
    } else {
        if (this.nextElementSibling.classList.contains("test-class-name") && $d2.is(":empty")) {
          content.style.cssText = "opacity: 0; display: block;";
          // do some stuff
        } else { 
          content.style.display = "block";
        }  
    }                                  
});}

// Updated: (if it helps, this is far as I'm get with it for the moment, and stack on the eventlistener part)

$(".div1").on("click", function() { 

var $ss = $(".div2");

var i;

for (i = 0; i < coll.length; i++) {

$("this").toggleClass("active");}}

Upvotes: 1

Views: 64

Answers (1)

pid
pid

Reputation: 11597

Not truly sure but this should kinda do it.

var d1, d2;

d1 = $(".div_1");
d2 = $(".div_2");

d1.on("click", () => {
  var node, content;

  node = $(this);
  node.toggleClass("active");
  content = node.next();

  if (content.css("display") === "block")
  {
    content.css("display", "none");
  } else {
    if (content.is(".test-class-name") && d2.is(":empty"))
    {
      content.css({ "opacity": 0, "display": "block"});
      // do some stuff
    } else { 
      content.css("display", "block");
    }  
  }
});

Upvotes: 1

Related Questions