logo标签列表

jQuery ('div').on 函数的标签选择

jqueryhtmlcss
3

我对jQuery还不太熟悉，想了解一下.on()函数。例如：

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

第一段代码是选择HTML文件中的所有“div”元素并监听点击事件。然后，它将为我最后点击的div切换我的“show-description”类“on”和“off”。 

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

如果我只想在div标签中指定一个我定义的特定类来监听我的事件，该怎么办？
我已经尝试过：
```javascript $('.myDiv .myClass').on('click', function(){}); ```
但它不起作用。
$('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”声明。我已经尝试阅读API中的.on()方法，以及查看Stack，但似乎找不到任何有用的信息。我不是在寻找直接答案，只是需要指点正确的方向。谢谢。
2
你的代码中 <div class="about"> 在哪里？ - relaxeaza
正确，那是错误的符号表示。我尝试过这个代码...... $("div.column").on("click", "#about", function(){ $(this).toggleClass('show-description'); });
但似乎它仍无法正确监听到正确的元素... - Ryan Anderson
1
@RyanAnderson 实际上你写的那个 $("div.column").on("click", "#about", function(){ }) 应该是可以工作的。我试过了，但我在那个点击监听器里使用了 alert("test")，它也能正常工作。 - Bla...
@Dekel，我已经做了，谢谢你的帮助，你的回答清晰、简洁，正是我所需要的！感谢你的所有帮助。 - Ryan Anderson
2个回答
2

$('div.about') 将选择所有具有 about 类的 div 元素。在你的例子中 - 没有一个 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', ...
1
如果我想仅指定在div标签内定义的特定类来监听我的事件怎么办？下面是我的示例，它不使用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>

如果你想对 ul 中的每个 li 进行操作，那么可以使用以下代码：
$( "ul.topnav li" ).css( "border", "3px double red" );

如果你想对每个 ul 的子元素内的每个

  • 做一些操作，可以像这样实现：

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

    针对您的特定情况，您可以这样做：

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

    希望它有所帮助。
    1
    虽然对于这个特定的例子没有直接帮助，但将来肯定会参考这个。谢谢！ - Ryan Anderson
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接