Question

如何创建.click()函数，如果span的文本是＆＃34; Option1＆＃34;，它将使我能够进行某些操作（例如alert('you selected option1');）

＆＃13;

<ul class="tabs" style="height: 27px;">
  <li class="tabs-selected"><a href="javascript:void(0)" class="tabs-inner" style="width: 112px; height: 27px; line-height: 25px;"><span class="tabs-title">Option1</span><span class="tabs-icon"></span></a>
  </li>
  <li><a href="javascript:void(0)" class="tabs-inner" style="width: 112px; height: 27px; line-height: 25px;"><span class="tabs-title">Option2</span><span class="tabs-icon"></span></a>
  </li>
  <li><a href="javascript:void(0)" class="tabs-inner" style="width: 112px; height: 27px; line-height: 25px;"><span class="tabs-title">Option3</span><span class="tabs-icon"></span></a>
  </li>
</ul>

＆＃13;

Answer 1

$(function() {
    $("ul").on("click", "li", function() {
        alert("You selected: " + $(this).text());
    });
});

Answer 2

$(function() {
    $("ul").on("click", "li", function() {
        alert("You selected: " + $(this).text());
        if ($(this).text() == "Option1"){
            alert('Option one is selected');
        }

    });

完整代码感谢比利时

Answer 3

您也可以这样做。

＆＃13;

$("ul li").click(function() {
  alert("You selected: " + $(this).text());
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs" style="height: 27px;">
  <li class="tabs-selected"><a href="javascript:void(0)" class="tabs-inner" style="width: 112px; height: 27px; line-height: 25px;"><span class="tabs-title">Option1</span><span class="tabs-icon"></span></a>
  </li>
  <li><a href="javascript:void(0)" class="tabs-inner" style="width: 112px; height: 27px; line-height: 25px;"><span class="tabs-title">Option2</span><span class="tabs-icon"></span></a>
  </li>
  <li><a href="javascript:void(0)" class="tabs-inner" style="width: 112px; height: 27px; line-height: 25px;"><span class="tabs-title">Option3</span><span class="tabs-icon"></span></a>
  </li>
</ul>

＆＃13;

在单击事件中读取SPAN的内容

3 个答案: