3

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

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()将数据推送到地图。然后我决定在myClick()函数中实现这些：

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

问题是我不能使用$(this)将类添加到其父级li。看看我在这里尝试了什么。

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

4

5 回答 5

4

既然你说，你不能使用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');
}
于 2013-10-23T04:02:24.673 回答
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>

看看有多干净？;-)

于 2013-10-23T06:36:45.037 回答
1

更改此代码

$(this)

到

$(this.event.srcElement).parent().parent() //span is clicked, go to anchor then go to li
于 2013-10-23T03:46:35.887 回答
0

您可以不使用 jQuery 来执行此操作，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);   
}
于 2013-10-23T04:12:09.537 回答
-2

你能改变标记吗？

<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');
})
于 2013-10-23T03:50:58.953 回答