Question

我正在做一些练习练习我的JQuery，但我无法找到解决方案。我只是想点击列表中的第一个元素。

我试过这个：

JS

＆＃13;

    $(document).ready(function(){
        $("li.oculta").click(function(){
		  $(this).hide();
	    });
    });

＆＃13;

<html>
 <head>
 <style>
	p{
		background-color: #AA55AA;
	}
 </style>
 <script src="/jquery-2.1.1.js"></script>
 </head>
 <body>
	<ul class='list1'>
		<li class="oculta">Taco</li>
		<li>Jamón</li>
		<li>Queso</li>
	</ul>
	<ul class='list2'>
		<li class="oculta">Coke</li>
		<li>Leche</li>
		<li>Té</li>
	</ul>
 </body>
 </html>

＆＃13;

但我无法弄清楚为什么不起作用。有什么想法吗？

Answer 1

使用on('click',function(){...代替.click(function(){...

$(document).ready(function(){
    $("li.oculta").on('click',function(){
      $(this).hide();
    });
});

jsfiddle

Answer 2

非常简单的错误，代码没问题，但你忘了导入jQuery。

$(document).ready(function(){
        $("li.oculta:first-of-type").click(function(){
		  $(this).hide();
	    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <head>
 <style>
	p{
		background-color: #AA55AA;
	}
 </style>
 <script src="/jquery-2.1.1.js"></script>
 </head>
 <body>
	<ul class='list1'>
		<li class="oculta">Taco</li>
		<li>Jamón</li>
		<li>Queso</li>
	</ul>
	<ul class='list2'>
		<li class="oculta">Coke</li>
		<li>Leche</li>
		<li>Té</li>
	</ul>
 </body>
 </html>

使用JQuery单击时隐藏<li>标记

2 个答案: