CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmed Hussein
Ahmed Hussein

Reputation: 56

How to use a javascript function inside class attribute of an element

I want to create a dynamic 'li' elements and want to assign some classes to the 'li' element by a javascript function based on some parameters in the load of the page I mean i want the function to run on all the 'li' elements i assign the function to.

something like : in design

<li class="nav-item someFunction("param1","param2")">
</li>

and the 'someFunction' is a javascript function that returns some classes as a string

to make the 'li' element as follows in the end : after rendering

<li class="nav-item cssClass1 cssClass2 cssClass3 cssClass4">
</li>

Upvotes: 0

Views: 1632

Answers (3)

Ahmed Hussein
Ahmed Hussein

Reputation: 56

Actually I figured out the answer from you people answered ideas I create the li items dynamically so I tried to create all the markup for it from database but it didn't work as the functions calls are being copied as string without parsing or compiling it of course so I have made the following function :

function someFuncionConvertedItsCodeFromServerSide(parameter1, parameter2,...) {
//somecode that debend on some server side functions, collections, session values, properties
// return css as string
}

and get some parameters from the db as follows in the ajax call example :

$.ajax({
                    type: 'POST',
                    url: 'url',
                    dataType: 'json',
                    success: function (result) {

                        for (var i = 0; i < result.array.length; i++) {
                            var css = someFuncion(result.array[i].id, other parameters .. );
                            var liItem = "<li class=\"nav-item " + css + " id=\"" + result.array[i].id + "\"> <a href =\"" + someHref + "\" class=\"nav-link\"> <span class=\"title\" > " + someText + " </span ></a>  </li>";
                            $("#ulId").append(liItem);
                        }  
                    }
                });

so as you can see I created an id for every created li to combine the parameters in one place that can be sent to a javascript function to return the css classes as a string as needed

It's a prototype code of course it needs some modification but that what is done and worked thank you all guys trying to help I get the idea from our discussion together tell me If i didn't mark the right answer

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$(document).ready(function(){
  $("#ifValueBtn").on("click",function(){
      var iFinput=$("#ifValue").val();
      if(iFinput==1)
        $(".nav-item").addClass("cssClass1");
      else if(iFinput==2)
        $(".nav-item").addClass("cssClass1 cssClass2");
      else
        $(".nav-item").addClass("cssClass1 cssClass2 cssClass3");

     console.log($(".nav-item").attr("class"));
   });
});
.cssClass1{color:red;}
.cssClass2{border:solid 1px #000;}
.cssClass3{font-size:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ifValue" type="number" value="1"/>
<input id="ifValueBtn" type="button" value="Click"/>
<hr>
<ul>
<li class="nav-item">
test
</li>
</ul>

Upvotes: 1

David Somekh
David Somekh

Reputation: 933

Not exactly how you asked it, but here is how you do it with jquery:

CodePen: https://codepen.io/anon/pen/XeJKVL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.red{
  color:red;
  font-size:25px;
}
</style>
<script>
window.onload = function() {

        $( "#example" ).addClass("red");



    }

</script>
<li id="example">Example</li>

Upvotes: 1

Related Questions