Question

鉴于此功能：

function highLightLi(className, textContent){

  if ( $("body").hasClass(className) ){

     $(".second-navbar").find("li:contains(textContent)").addClass("current");
  }
}

highLightLi('page-template-taller', 'Taller');

我知道if语句传递为true，如果我对textContent进行硬编码，它会按照我想要的方式执行，并将类添加到li中，但无论我如何编写它，它都不会作为参数传递。我做错了什么？

Answer 1

尝试将find语句修改为：

 $(".second-navbar").find("li:contains('"+textContent+"')").addClass("current");

您需要在find语句中连接字符串，这样您就可以从传递给函数的任何内容中动态添加字符串。

让我知道这是否有效！

Answer 2

我们可以结合使用filter和trim方法。您希望避免字符串无法在节点文本中存在撇号的情况下转义。

function highLightLi(className, textContent)
{
  
  if ( $("body").hasClass(className) )
  {
     //filter through all li elements
     $(".second-navbar li").filter(function()
     {
        //use trim method to remove white space
        var liText = $(this).text().trim(); 
        var containsText = false;
        
        //Check if node contains string parameter
        if (liText.indexOf(textContent) >= 0)
          containsText = true;
        
        //return if li text contains textContent parameter and add the class
        return containsText;     
        
     }).addClass("current");
  }
}

//escape the apostrophe
var searchParam = "your's";
highLightLi("page-template-taller", "Taller");
highLightLi("page-template-taller", searchParam );

.current
{
  background: yellow;
  font-size: 16px;
  font-weight: bold;
}

.page-template-taller
{
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body class="page-template-taller">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="second-navbar nav navbar-nav">
        <li><a href="#"> Tall </a></li>
        <li><a href="#"> Taller </a></li>
        <li><a href="#"> Tallest </a></li>
        <li><a href="#"> your's is Taller </a></li>
      </ul>
     </div>
  </nav>
</body>

在jQuery函数中，硬编码文本有效，但传入参数却没有

2 个答案: