Question

我有两个无序列表需要彼此镜像。我使用这些列表作为用户选择他们希望返回的结果大小的方式。

<ul>
    <li><a class='myclass selected' title='display 5'>5</a></li>
    <li><a class='myclass' title='display 10'>10</a></li>
    <li><a class='myclass' title='display 15'>15</a></li>
    <li><a class='myclass' title='display 20'>20</a></li>
    <li><a class='myclass' title='display 50'>50</a></li>
</ul>
<div id='content'></div>
<ul>
    <li><a class='myclass selected' title='display 5'>5</a></li>
    <li><a class='myclass' title='display 10'>10</a></li>
    <li><a class='myclass' title='display 15'>15</a></li>
    <li><a class='myclass' title='display 20'>20</a></li>
    <li><a class='myclass' title='display 50'>50</a></li>
</ul>

当单击其中一个链接时，我使用jquery添加一个类以使包含的文本变为粗体，但我需要一种方法将此类添加到第二个列表。我最初想过使用包含的文本，但是当点击5时，15和50也添加了这个类，我知道为什么因为他们的文本中有5个，但是我很难解决这个问题。

$('a.myclass').live('click',function(){
   var size = $(this).text(); 
   $('a.myclass').removeclass('selected');
   $('a.myclass:contains('+size+')').addClass('selected');
});

问题是

Answer 1

如果仅在列表中，这将是一个解决方案。你可以使用$（this），这是对点击链接的引用。

$('a.myclass').live('click',function(){
   var size = $(this).text(); 
   $('a.myclass').removeclass('selected');
   $(this).addClass('selected');
});

这可能是镜像列表问题的解决方案。（有两个相同的列表）

HTML：

<ul>
    <li><a class='myclass size-5 selected' title='display 5'>5</a></li>
    <li><a class='myclass size-10' title='display 10'>10</a></li>
    <li><a class='myclass size-15' title='display 15'>15</a></li>
</ul>
<div id='content'></div>
<ul>
    <li><a class='myclass size-5 selected' title='display 5'>5</a></li>
    <li><a class='myclass size-10' title='display 10'>10</a></li>
    <li><a class='myclass size-15' title='display 15'>15</a></li>
</ul>

的JavaScript

$('a.myclass').live('click',function(){
   var size = $(this).text(); 
   $('a.myclass').removeclass('selected');
   $('size-'+size).addClass('selected');
});

jQuery分页：包含问题

1 个答案: