Jquery показать несколько элементов на Щелк

меня такая ситуация:Jquery показать несколько элементов на Щелк

Две колонки с информацией один с вопросы и один с отвечает. Я хочу нажать на один вопрос и показать в следующем столбце ответ. Вопрос может иметь несколько ответов, поэтому мне нужно показать несколько элементов одним щелчком мыши.

Я написал код, принимая значение с некоторым 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() или более эффективным способом.

Благодаря

источник

2014-09-19 DaniP

Вам все равно придется как-то рассказать Javascript, какие вопросы соответствуют тем ответам ... Я не вижу более эффективного способа, чем вы использовали. Другие возможности - «пометить» * ответы *, используя имена классов (например, ответ A может содержать теги 'this-answers-q1' и' this-answers-q3') или динамически генерировать весь HTML на основе объекта JS/массив вопросов/ответов? – Shai

Спасибо за комментарий @Shai Мне было интересно, в случае, если у меня слишком много ответов, я хочу избежать имен классов, также ответы могут отвечать нескольким вопросам. – DaniP

Это еще один способ сохранить ответы. Вы сохраняете все индексы (да, я знаю, а не индексы, поскольку они начинаются с 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/

источник

2014-09-19 15:01:06 Spokey

Спасибо за ответ, кажется, довольно приятный aproach – DaniP

Как программист, который любит неинтрузивное кодирование, я предпочел бы сохранить данные в формате JSON и построить функцию, чтобы найти ассоциации на основе данных, полученных из доказательств дивы:

<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/

источник

2014-09-19 14:51:31

Спасибо за ответ ... Я не вижу демо – DaniP

http://jsfiddle.net/o6xtcsx8/ oups –

Еще раз спасибо за работу, но я не вижу, как применить это к моему конкретному случаю. Я не знаю, о JSON вы идете с +1 – DaniP

Вот еще один способ для достижения этой цели

Получить в div сек длину .answer
Получить индекс clicked div
Получить индекс next div (будет вполне clicked div + 1)
- Сбросить индекс next div если clicked div является последним

Fiddle

$(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(); 
 
    }); 
 
});

.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/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>

источник

2016-06-22 20:27:25

Jquery показать несколько элементов на Щелк

ответ

Смежные вопросы