Question

我遇到这种情况：

两列包含问题的信息，另一列包含答案。我想点击一个问题，然后在下一栏中显示答案。问题可以有多个答案，所以我需要通过单击显示多个元素。

我写了一些代码，其值为data attribute，如下所示：

HTML

<div class="evidence">
    <div data-answer=".A,.B">1</div>
    <div data-answer=".B,.C">2</div>
    <div data-answer=".A,.C">3</div>
</div>
<div class="answer">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
</div>

Jquery的

$(document).ready(function(){
    $('.evidence').on('click','div',function(){
        $('.answer div').hide();
        var ans = $(this).data('answer');
        $(ans).show();
    })
})

这是Demo Fiddle。

它有效，但我的问题是，是否有某种方法可以改进我的代码，避免在答案列中编写每个类名，或者以eq()或更有效的方式显示元素。

由于

Answer 1

这是存储答案的另一种方法。你存储了数组中答案的所有索引（是的，我知道，不是真正的索引，因为它从1开始，但我找不到更好的词）并将它们分配给证据的索引。

var answers = {
    1: [1, 2, 3],
    2: [2, 3],
    3: [1, 3]
};

$('.evidence').on('click', 'div', function () {
    var ans = $(this).index() + 1;
    $('.answer div').hide().filter(function () {
        return answers[ans].indexOf($(this).index() + 1) > -1;
    }).show();
});

.evidence {
    width:200px;
    float:left;
}
.answer {
    width:200px;
    float:right;
}
.evidence div, .answer div {
    height:100px;
    line-height:100px;
    margin-bottom:15px;
    background:red;
    color:white;
    text-align:Center;
}
.answer div {
    background:orange;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="evidence">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div class="answer">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

使用代码http://jsfiddle.net/g9hL881L/1/

的小提琴

Answer 2

作为喜欢非侵入式编码的程序员，我宁愿将数据保存在JSON中，并构建一个函数来根据从证据div中检索到的数据来查找关联：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var data = {"questions":[
        {"evidence":"1", "answers" : ["A", "B"]},
        {"evidence":"2", "answers" : ["B", "C"]},
        {"evidence":"3", "answers" : ["A", "C"]}
    ]};
$(document).ready(function(){
    $(".evidence div a").click(function(){
        var evidence = $(this).text();
        $.each(data.questions, function(key, value){
            if(value.evidence == evidence)
            {
                $.each(value.answers, function(key2, answer){
                    alert(answer);
                });
            }
        });
    });
});
</script>
</head>
<body>
    <div class="evidence">
        <div><a href="#">1</a></div>
        <div><a href="#">2</a></div>
        <div><a href="#">3</a></div>
    </div>
</body>
</html>

出于演示的目的，我在警报中显示结果，但您可以更改

使用JSON是在javascript中存储数据的最佳方式（AngularJS是JSON驱动应用程序的一个很好的例子）。如果您想扩展您的应用程序，您将能够将数据存储在数据库中，并为您发送后端。

难道不是很棒！

http://jsfiddle.net/o6xtcsx8/

Answer 3

这是实现这一目标的另一种方法

获取div

.answer

获取clicked div
获取next div索引（将是clicked div + 1）
- 如果next div是最后一个

Fiddle

＆＃13;

$(document).ready(function(){
    $('.evidence').on('click','div',function(){
        $('.answer div').hide();
        $divLen = $('.answer div').length;
        $thsIndx = $(this).index();
        // reset the index if the clicked is the last div
        $nextIndex = ( ($thsIndx + 1) === $divLen ) ? 0 : ($thsIndx + 1);
        $('.answer div').eq($thsIndx).show();
        $('.answer div').eq($nextIndex).show();
    });
});

＆＃13;

.evidence {
    width:200px;
    float:left;
}
.answer {
    width:200px;
    float:right;
}
.evidence div, .answer div {
    height:100px;
    line-height:100px;
    margin-bottom:15px;
    background:red;
    color:white;
    text-align:Center;
}
.answer div {
    background:orange;
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="evidence">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div class="answer">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

＆＃13;

Jquery在Click上显示多个元素

3 个答案: