Question

我想创建一个动态'li'元素，并希望通过javascript函数根据页面加载中的一些参数为'li'元素分配一些类我的意思是我希望函数在我分配函数的所有'li'元素上运行。

像这样的东西：在设计

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

和'someFunction'是一个javascript函数，它将一些类作为字符串

返回

最后将'li'元素设置如下：渲染后

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

Answer 1

不完全是你问的方式，但这是你用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>

Answer 2

$(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>

Answer 3

实际上我找到了你们回答想法的答案我动态创建li项，所以我尝试从数据库创建它的所有标记，但它没有工作，因为函数调用被复制为字符串而不解析或编译它当然所以我做了以下功能：

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

并在ajax调用示例中从db获取一些参数：

$.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);
                        }  
                    }
                });

因此您可以看到我为每个创建的li创建了一个id，以便将参数组合到一个可以发送到javascript函数的位置，以便根据需要将css类作为字符串返回

它是原型代码，当然需要进行一些修改，但需要做些什么和工作谢谢所有想帮助我从一起讨论的人告诉我，如果我没有标出正确答案

如何在元素的class属性中使用javascript函数

3 个答案: