突出div.slideToggle显示

这是我的第一个问题，所以我希望我能够格式化和正确地说出它。突出div.slideToggle显示

我刚刚开始在网站codeacademy上学习jQuery，我一直试图根据我学习的内容创建一个简单的应用程序。这是基于布里斯托尔市长候选人的顶级王牌风格游戏（我知道的非常独特）。

我想要的是，当您点击Marvin卡片上的某个选项时，加载在右边的卡片（George）将突出显示相同的选择。举例来说，如果我选择“Tweets”选项，那么它会突出显示George的卡片上的“Tweets”选项，然后它才会滑动。

我设法得到对一般造型某种方式和一点点了jQuery的（道歉，如果这是很难理解我怎么会写它），你可以在这里看到的例子：

http://jsfiddle.net/4vdf4/

关于如何编写一些jQuery的任何想法，以便在单独的div中突出显示的选择基于用户的点击而显示。

非常感谢，马特

来源

2012-08-15 matttickner

您的标记是不是很漂亮，但至少努力，你可以在第二张卡上访问相应的列表内容$(".link").click函数内部是这样的：

$('#' + $(this).attr('id') + '1').css('background-color','red');

来源

2012-08-15 11:02:20

嗨米歇尔，我可怜的标记道歉，希望这是我可以重温的东西。非常感谢您的回答，它完美地工作。 Matt – matttickner 2012-08-15 11:06:17

只需更换点击代码与此。然后明显调整了一下。

这将按照您的要求定位指数LI。

var getId; 
      $("#stats li").click(function() { 
       getId = $(this).index(); 
       $('#card1').slideToggle(); 
      }); 

      $(".link").click(function() { 
       $(".link").css('color', ''); 
       $(".link").css('background-color', ''); 
       $(this).css('background-color', 'red'); 
       $(this).css('color', 'white'); 
       $(this).addClass('picked'); 
       $('#stats1 ul li').eq(getId).addClass("picked"); 
      });

来源

2012-08-15 11:05:56 Christopher

让我成为第一个第一次用户说这是一个非常良好的书面质询，比一些长期成员更好！

接听，在一个简单的例子，只是你对选择行，这里的问题就是一个例子http://jsfiddle.net/chricholson/xhAnK/1/

<div id="card1"> 
    <ul>   
     <li class="row1">Row 1</li> 
     <li class="row2">Row 2</li> 
     <li class="row3">Row 3</li> 
     <li class="row4">Row 4</li> 
    </ul> 
</div> 

<div id="card2"> 
    <ul>   
     <li class="row1">Row 1</li> 
     <li class="row2">Row 2</li> 
     <li class="row3">Row 3</li> 
     <li class="row4">Row 4</li> 
    </ul> 
</div>

jQuery的

$(document).ready(function(){ 

    $('div li').click(function(){ 

     // remove any previous selections 
     $('div li').removeClass('selected'); 


     // get the class of the row you have clicked 
     var strClass = $(this).attr('class'); 


     // apply the class to the other divs 
     $('div li.' + strClass).addClass('selected'); 

    }); 

});

那么这是怎么回事？基本上，点击任何列表项目都会发现它是类似div中的合作伙伴。在这种情况下，我使用过类，所以如果出于某种原因，这些行不按顺序出现，则无关紧要。由于您按固定顺序修复了行，因此您可能会根据行的位置而不是其名称进行跟踪。

注意我已经使用了类而不是id。出于同样的原因，您总是拥有相同的行，这意味着您可以简单地获取您点击的行的类并使用相同的字符串在其他地方找到它。在你的情况下，使用ID，你必须首先操纵你从一个点击的列表项中收到的ID字符串，在结尾加'1'。看到你的例子修改：http://jsfiddle.net/chricholson/4vdf4/10/。请记住，您可以同时拥有ID和类，因此您仍然可以保持ID以正确绑定数据，然后仅使用类进行选择过程。

我觉得我的答案写得比你的问题小很多！让我知道你是否需要更多指导。

来源

2012-08-15 11:06:13 Chris

谢谢你的客气话Chris。另外，谢谢你这么好的解释。我非常感谢您花时间解释发生的事情，因为这是我将来能够学习和理解的方式。它也像魅力一样工作。我碰巧偶然发现了你的CSS（甚至是），这远远超过我设计我的div的方式，我将来会使用它。再次感谢，马特 – matttickner 2012-08-15 11:36:12

突出div.slideToggle显示

回答

相关问题