Question

我创建了一个下拉菜单。我试图使用jQuery获取当前li值。有没有什么方法可以让我们获得当前li的当前值或任何其他更聪明的方法来做到这一点。

我的JS小提琴示例：http://jsfiddle.net/o2gxgz9r/17/

Answer 1

需要删除空格

＆＃13;

$('.languageDropdown li').on('click', function(){

var reg = /^\s*|\s*$/g;  
alert("=="+$(this).text()+"==");
var text = $(this).text().replace(reg, "");


	if( text === 'ENGLISH'){
		alert('you just clicked english');
	}
	else{
		alert('wrong value');
	}
	
});

＆＃13;

a{
  font-size:12px;
  color:#000;
  text-decoration:none;
}
li a{
  padding-left:20px;
}
li a:hover{
  color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="language">
        <a href="#">
           ENG 
        </a>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </span>
      <ul class="languageDropdown">
        <li>
          <a href="#">
            ENGLISH
          </a>
        </li>
        <li>
          <a href="#">
            SPANISH
          </a>
        </li>
        <li>
          <a href="#">
            ARABIC
          </a>
        </li>
        <li>
          <a href="#">
            TELUGU
          </a>
        </li>
      </ul>

＆＃13;

Answer 2

.text（）通常会在实际值周围返回一堆空格，所以最好比较一下这样的空格。

if ($(this).text().trim() === 'ENGLISH')

或者，更好的是，为标记本身添加一个属性，这样即使文本是其他语言，您也可以识别该值。

<li value="english">
  <a href="#">
      'ENGLISH' in some other language
  </a>
</li>

if ($(this).attr("value") === "english")

Answer 3

与其他人一样，.text()会返回大量不必要的空格（应该是一些HTML标记），例如<li><a>123</a></li>将返回{bunch of spaces}123{bunch of spaces}，因为锚标记{{1} }已被空格所取代，如果我们使用a而没有这样的空格，因为没有HTML标签替换。

但是，我个人很少使用$("li a").text()作为价值比较。更好的做法是使用元素的.text() attr，如果它是一个化妆attr，则避免错过data-*前缀，以防止混淆其他程序员。

JsFiddle：http://jsfiddle.net/Zay_DEV/o2gxgz9r/19/

data-

var AcceptedValues = ["english", "abc"],
    ListItems = $(".languageDropdown li").each(function(){
      var $this = $(this);
      $this.attr("data-value", $this.text().trim().toLowerCase()); // Bind their text to data-value
    }).on("click", function () {
      var $this = $(this),
          Value = $this.attr("data-value");

      if ($.inArray(Value, AcceptedValues) >= 0) // Search if the value inside the array
        alert("You just clicked '" + Value.toUpperCase() + "'");
      else alert("Wrong value");
    });

a{
  font-size:12px;
  color:#000;
  text-decoration:none;
}
li a{
  padding-left:20px;
}
li a:hover{
  color:blue;
}

Answer 4

好的观点@Ying Yi，关于删除空格。

然后这应该只需添加trim（）：

$('.languageDropdown li').on('click', function(){
if( $(this).text().trim() === 'ENGLISH'){
    alert('you just clicked english');
}
else{
    alert('wrong value');
}

});

Answer 5

一种简单的方法是获取<li>元素的第一个子元素，然后获取它的innerHTML。您可以在不更改代码的情况下执行此操作：http://jsfiddle.net/ykbmatxw/

$('.languageDropdown li').on('click', function(){
    if($(this).children().get(0).innerHTML.trim() === 'ENGLISH'){
        alert('you just clicked english');
    }
    else{
        alert('wrong value');
    }
});

如何使用jQuery检查特定元素中是否存在当前值

5 个答案: