Question

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

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>

JQUERY

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

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

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

问题是我无法使用$(this)将类添加到其父li。请参阅what I have tried here。

非常感谢任何帮助。谢谢！

Answer 1

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

<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');
}

Answer 2

似乎数字实际上是索引，即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>

看看它有多干净？ ; - ）

Answer 3

更改此代码

$(this)

到

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

Answer 4

您可以在不使用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);   
}

Answer 5

你能改变标记吗？

<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');
})

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

5 个答案: