Question

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

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

我想要的是，当您点击Marvin卡上的其中一个选项时，右侧加载的卡片（George）会突出显示相同的选项。例如，如果我选择“推文”选项，那么它会在幻灯片开启之前突出显示乔治卡上的“推文”选项。

我已经设法在一般样式和一些jQuery方面取得了一些进展（如果很难理解我是如何编写它的，那就道歉了），你可以在这里看到这个例子：

http://jsfiddle.net/4vdf4/

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

非常感谢，马特

Answer 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以正确绑定数据，然后只需使用类进行选择过程。

我认为我的答案写得比你的问题少得多！如果您需要更多指导，请告诉我。

Answer 2

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

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

Answer 3

只需用此替换点击代码即可。然后明显调整一下。

这将根据您的请求定位索引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");
            });

突出显示.slideToggle揭示的div

3 个答案: