0

这是我的第一个问题，所以我希望我能够正确地格式化和措辞。

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

我想要的是，当您单击 Marvin 卡上的选项之一时，右侧加载的卡 (George) 会突出显示相同的选择。例如，如果我选择“Tweets”选项，那么它会在 George 的卡片上突出显示“Tweets”选项，然后再滑动切换。

我已经设法获得了一些通用样式和一些 jQuery（如果很难理解我可能是如何编写它的，请道歉），您可以在此处查看示例：

http://jsfiddle.net/4vdf4/

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

非常感谢，马特

4

3 回答 3

1

让我成为第一个说第一个用户这是一个写得很好的问题，比一些长期成员更好！

在一个简化的示例中，仅回答有关选择行的问题，这是一个示例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-15T11:06:13.683 回答
0

您的标记不是很好，但是您可以毫不费力地访问$(".link").click函数内第二张卡片上的相应列表项，如下所示：

$('#' + $(this).attr('id') + '1').css('background-color','red');
于 2012-08-15T11:02:20.900 回答
0

只需用这个替换点击代码。然后显然对其进行了一些调整。

这将按照您的要求定位索引 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-15T11:05:56.157 回答