jquery Frage zu Element

Question

Ich habe Code-Block wie folgt ... zwei zeigen/verbergen zwei Divs. d.h. zwischen den Divs umschalten.

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

Wenn nun der openAns() geklickt wird, möchte ich $('front') div und FadeIn $('back') div Fadeout. Und wenn closeAns() angeklickt wird, möchte ich $('front') div und ausblenden $('back') div. Ich bin nicht in der Lage, das div von dem angeklickt <a> Element in jquery zu bekommen. Kann jemand helfen?

Answer 1

Sie müssen set class statt id für die div weil id sollte eindeutig sein und verwenden wie dieses

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

versuchen diese

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

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