如何在 onClick 事件调用的函数中使用 $(this）

How can I use $(this) in a function called by the onClick event?

本文关键字：this 函数 onClick 事件 调用      更新时间：2023-09-26

我想在单击每个链接时将当前状态设置为选中。我可以通过以下方式做到这一点：

.HTML 

<ul class="places">
    <li class="selected">
       <a href="javascript:void(0)" onclick="myClick(0);">
          <span class="date">Saturday November 2, 2013</span>
          <span class="time">10am – 12pm</span>
          <span class="location">Western Sydney Parklands</span>
       </a>
    </li>
    <li>
       <a href="javascript:void(0)" onclick="myClick(1);">
          <span class="date">Saturday November 9, 2013</span>
          <span class="time">10am – 12pm</span>
          <span class="location">Bankstown High School</span>
       </a>
    </li>
    <li>
       <a href="javascript:void(0)" onclick="myClick(2);">
          <span class="date">Tuesday November 12, 2013</span>
          <span class="time">9am – 11am</span>
          <span class="location">Greystanes Park</span>
       </a>
    </li>
</ul>

简讯

 $(document).ready( function() {
        $('.places li a').click( function() {
           $('.places li').removeClass('selected');
           $(this).parent().addClass('selected');
        });
    });

但这会在每个链接上双重触发 onclick 事件，因为调用函数 myClick() 是为了将数据推送到 map。然后我决定在myClick()函数中实现这些：

function myClick( id ) {
    google.maps.event.trigger(markers[id], 'click');
    $('.places li').removeClass('selected');
    $(this).parent().addClass('selected');
}

问题是我无法使用$(this)将类添加到其父li。看看我在这里尝试过什么。

任何帮助将不胜感激。谢谢！

既然你说你不能使用 jQuery 点击处理程序，那么使用 onclick="myClick(0, this);" 将点击的锚元素引用传递给myClick 

<li class="selected">
   <a href="javascript:void(0)" onclick="myClick(0, this);">
      <span class="date">Saturday November 2, 2013</span>
      <span class="time">10am – 12pm</span>
      <span class="location">Western Sydney Parklands</span>
   </a>
</li>

然后

function myClick( id, el ) {
    google.maps.event.trigger(markers[id], 'click');
    $('.places li').removeClass('selected');
    $(el).parent().addClass('selected');
}

似乎这些数字实际上是索引，即 0是第一个锚，1是第二个，依此类推;在这种情况下，您可以使用以下代码：

jQuery(function($) {
    var $places = $('.places li a'),
    $selection;
    $places.on('click', function(e) {
        e.preventDefault();
        if ($selection) {
            $selection.removeClass('selected');
        }
        $selection = $(this).parent()
            .addClass('selected');
        myClick($places.index(this));
    });
});

其余的 HTML 将是这样的：

<li class="selected">
   <a href="#">
      <span class="date">Saturday November 2, 2013</span>
      <span class="time">10am – 12pm</span>
      <span class="location">Western Sydney Parklands</span>
   </a>
</li>

看看这有多干净？;-）

更改此代码

$(this)

自

$(this.event.srcElement).parent().parent() //span is clicked, go to anchor then go to li

你可以在不使用onclick的情况下做到这一点，因为你已经在使用 jQuery。

http://jsfiddle.net/hz7K2/11/

$(document).ready( function() {
    var anchors = $('.places li a'),
        items = $('.places li');
    anchors.click( function() {
        var item = $(this).parent();
        items.removeClass('selected');
        item.addClass('selected');
        //using the jQuery index() method will get you the id of the LI that was 
        //clicked, assuming it is alway 0-based & sequential
        myClick( items.index(item) );
    });
});
function myClick( id ){
 alert('you clicked item '+id);   
}

你能改变标记吗？

<li id="item2">
       <a href="javascript:void(0)" data-item="2" onclick="myClick(2);">
          <span class="date">Tuesday November 12, 2013</span>
          <span class="time">9am – 11am</span>
          <span class="location">Greystanes Park</span>
       </a>
    </li>

$('a').click(function(){
 var clickedId = $(this).attr('data-item'); //use data attribute
 $('#item' + clickedId).addClass('selected');
})
相关文章：