Question

我对JQuery很新，想知道.on（）函数。例如：

$('div').on('click', function() {$(this).toggleClass('show-description');});

第一位代码是选择所有＆＃39; div＆＃39;我的HTML文件中的元素，正在侦听点击事件。然后，它将切换我的＆＃39; show-description＆＃39;课程＆＃39; on＆＃39;并且＆＃39;关闭＆＃39;对于我点击的最后一个div。

<div class="show-description"> ......</div>

如果我只想指定我在div标签中定义的特定类来监听我的事件，该怎么办？

我试过了：

$('div.about').on('click', function() {$(this).toggleClass('show-description');});

我在HTML中定义的地方：

<body>
 <div class="clearfix"> 
  <div class="column">
    <ul>
     <li id='about'> <span>About Me</span> </li>
      ......
   </div>
 </div>

然而，我没有得到我的'show-description＆＃39;要激活的声明。我已经尝试过阅读API .on（）方法，以及浏览Stack，似乎无法找到任何可以帮助解决此问题的方法。 我没有寻找直接回答只是 朝着正确的方向轻推。

感谢。

Answer 1

$('div.about')将选择具有div类的所有about元素。在您的示例中 - div个元素都没有该类。

您示例中唯一的about是id（不是类），它位于li元素中。

您可能需要这样：$('li#about').on('click', ...

检查以下代码段：

$('div.about').on('click', function() {$(this).toggleClass('show-description');});


$('li#about').on('click', function() {$(this).toggleClass('show-description');});

.show-description {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix"> 
  <div class="column">
    <ul>
      <li id='about'> <span>About Me</span> </li>
    </ul>
  </div>
  <div class="about">This div has the "about" class</div>
</div>

在上面的示例中，您可以看到可以点击两个元素 - li#about和div.about。每次单击都会将红色边框切换到单击的元素。

作为旁注（对于上面的例子），我们可以用

完全相同

$('div.about, li#about').on('click', ...

Answer 2

如果我只想指定我在
中中定义的特定类，该怎么办？标签，以收听我的活动？

我的示例下面没有使用class和on功能，但我相信您可以理解。假设您有以下HTML代码：

<ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul> <li>Nested item 1</li> <li>Nested item 2</li> <li>Nested item 3</li> </ul> </li> <li>Item 3</li> </ul>

如果您想对 li中的每个ul 执行某些操作，请使用以下内容：

$( "ul.topnav li" ).css( "border", "3px double red" );

但是，如果您想对 li内的每个ul 进行操作，那么您可以执行以下操作：

$( "ul.topnav > li" ).css( "border", "3px double red" );

对于您的具体情况，您可以这样做：

$( "div #about" ).on( ... );

希望它有所帮助。

Jquery（＆＃39; div＆＃39;）。关于功能标签选择

2 个答案: