jquery问题选择元素

Question

我有如下代码块...两个显示/隐藏两个 div。即在 div 之间切换。

<li class="col-sm-6 col-md-4 col-lg-3">
     <div id="front" class="riddles-border">
        <div class="reddle-question"><p>Question 1</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="back" class="riddle-sliding-content">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span> </a>
        <div class="r-answer"><p>Answer 1</p>
     </div>
     </div>
 </li>

 <li class="col-sm-6 col-md-4 col-lg-3">
     <div id="front" class="riddles-border">
        <div class="reddle-question"><p>Question 2</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="back" class="riddle-sliding-content">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span> </a>
        <div class="r-answer"><p>Answer 2</p>
     </div>
     </div>
 </li>

现在当点击openAns() 时，我想淡出$('front') div 和淡入$('back') div。而且，当点击closeAns() 时，我想淡入$('front') div 和淡出$('back') div。我无法从 jquery 中单击的<a> 元素中获取 div。有人可以帮忙吗？

Answer 1

你必须set class 而不是id 用于div，因为id 应该是唯一的并且像这样使用

 function openAns(anchor)
{

    $(anchor).parent('div').parent('div').next('div.back:hidden').fadeIn();
    $(anchor).parent('div').parent('div').fadeOut();

}

function closeAns(anchor)
{
   
      $(anchor).parent('div').prev('div.front:hidden').fadeIn();
    $(anchor).parent('div').fadeOut();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="col-sm-6 col-md-4 col-lg-3">
     <div id="" class="riddles-border front">
        <div class="reddle-question"><p>Question 1</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="" class="riddle-sliding-content back" style="display:none">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span>Question </a>
        <div class="r-answer"><p>Answer 1</p>
     </div>
     </div>
 </li>

 <li class="col-sm-6 col-md-4 col-lg-3">
     <div id="" class="riddles-border front">
        <div class="reddle-question"><p>Question 2</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="" class="riddle-sliding-content back" style="display:none">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span>Question </a>
        <div class="r-answer"><p>Answer 2</p>
     </div>
     </div>
 </li>

Answer 2

试试这个

function openAns(thiss) {   
    thiss.parent().parent().fadeOut();
    thiss.parent().parent().fadeIn();
}

function closeAns(thiss) {
    thiss.parent().parent().fadeIn();
    thiss.parent().parent().fadeOut();
}