Доброго времени суток!
Не совсем точно, видимо, объяснила, свою проблему. Поэтому обновляю вопрос:
Есть ссылки .answer-list-name
, при нажатии на которые, все .thumbnail
, не содержащие такой .answer-name
, становятся невидимыми. А при нажатии, на "Все ответы" - все становятся видимыми. Вопрос в том, как правильно сравнивать значения нажимаемого .answer-list-name
и всех имеющихся .answer-name
.
Надеюсь, понятно объяснила. :)
var answers = [{
"answer_name": "Ария Старк",
"strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}, {
"answer_name": "Джейме Ланнистер",
"strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}];
for (var ans in answers) {
var answerList = document.getElementById("answers-list");
var strongsTo = document.getElementById("strongs");
var newAnswerName = document.createElement('li');
newAnswerName.innerHTML = "<a class='answer-list-name'>" + answers[ans].answer_name + "</a>";
answerList.appendChild(newAnswerName);
/*Сильные стороны*/
var newStrong = document.createElement('div');
newStrong.className = "answer col-xs-6 col-sm-4 col-lg-3";
newStrong.innerHTML = "<div href='#' class='thumbnail'> <h5 class='answer-name'>" + answers[ans].answer_name + "</h5><p class='answer-text'>" + answers[ans].strong + "</div>";
strongsTo.appendChild(newStrong);
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<ul class="answers-list" id="answers-list">
<li class="active"><a class="answer-list-name" href="">Все ответы</a>
</li>
</ul>
<div class="row answers" id="strongs">
</div>