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和fadein $('back') div。并且，当点击closeAns()时，我想淡出$('front') div和fadeout $('back') div。我无法从jquery中单击的<a>元素中获取div。有人可以帮忙吗？

Answer 1

对于div，您必须set class而不是id，因为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();
}

jquery问题选择元素

2 个答案: