JQuery toggle Q & A: individuelle Q & A funktionieren nicht korrekt, wenn Sie auf Alle öffnen/Alle zuerst klicken

Ich habe eine Q & Eine Liste mit "Alle öffnen/Alle schließen" an der Spitze mit einzelnen öffnen und schließen Bild Schaltflächen umschalten, wenn geklickt wird. Das funktioniert gut.JQuery toggle Q & A: individuelle Q & A funktionieren nicht korrekt, wenn Sie auf Alle öffnen/Alle zuerst klicken

Dann folgen individuelle Q & As, und jeder hat seine eigenen öffnen und schließen Bild.

Wenn Sie auf „Alle öffnen/schließen“ klicken Sie zuerst auf, sobald die Seite geladen wird, und klicken Sie dann auf die einzelnen Q & Ein Öffnen/Schließen Bilder, alles funktioniert gut. Wenn Sie jedoch nach dem Laden der Seite auf die einzelnen Bilder zum Öffnen/Schließen klicken und "Alle öffnen/Alle schließen" überspringen, wird das unangemessene Öffnen oder Schließen des Bildes angezeigt.

Hier Seitencode ist:

<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div> 
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div> 

<div class="qa"> 
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div> 
<div class="answer"><p>Answer.</p></div> 
</div>

Hier ist das Skript (auch verwendet JQuery):

$(function() { 
    $(".qa").click(function() { 
     $(this).find("div").next().slideToggle("fast"); 
     if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") { 
      $(this).find("div:eq(0)").find("img").attr("src", "close.gif"); 
     } 
     else { 
      $(this).find("div:eq(0)").find("img").attr("src", "open.gif"); 
      } 
    }); 
    $(".answersee").click(function() { 
     $(".answer").show("fast"); 
     $(".qa > div > img").attr("src", "close.gif"); 
     $(".answerhide").show(); 
     $(".answersee").hide(); 
        }) 
    $(".answerhide").click(function() { 
     $(".answer").hide("fast"); 
     $(".qa > div > img").attr("src", "open.gif"); 
     $(".answersee").show(); 
     $(".answerhide").hide(); 
        }) 
});

Ich glaube nicht, es ist ein CSS Problem ist, oder ich würde diesen Code hier enthalten . Muss ich das Skript irgendwie initialisieren? Oder habe ich im obigen Skript einen Fehler gemacht?

Quelle

2009-07-31 Anonymous

Sie müssen die Rückrufe verwenden, da Ihre Animation nicht bis zum Zeitpunkt der Prüfung abgeschlossen ist, um zu prüfen, welches Bild angezeigt wird.

$(".qa").click(function() { 
    $(this).find("div").next().slideToggle("fast", toggleImage); 
} 

function toggleImage(){ 
    var $img = $(this).find("img"); 
    $img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif"); 

}

N. B Es gibt bessere Möglichkeiten, dies zu tun, sondern lässt erhalten Sie zuerst arbeiten und dann sehen, wenn Sie es einige mehr Refactoring wollen.

Quelle

2009-07-31 00:16:41 redsquare

Hmm, das war es nicht. Ich frage mich, ob es einen Fehler gibt. –

Vielen Dank für Ihre Hilfe. Ich bin nicht in der Lage, Ihren Code erfolgreich mit dem Rest von mir zu integrieren. Ich habe verschiedene Dinge ausprobiert. Können Sie das gesamte Skript bereitstellen? Ich weiß, dass das viel verlangt, aber ich muss einen Fehler in meiner Syntax machen. –

Sorry ich lese das Q falsch. es ist spät. Wenn niemand sonst hilft, werde ich es tun, wenn ich aufwache. – redsquare

So würde ich es machen.

Working Demo →

EDIT:

Aktualisieren Sie den Code einfach Öffnen/Schließen Link zu haben.

Code mit Kommentaren, die meinen Ansatz erklärt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<style> 
    body 
    { 
     font-family: "Verdana"; 
     font-size: 12px; 

    } 
    .question 
    { 
     background-color: #ccc; 
     cursor: pointer; 
     padding: 5px; 
     margin-bottom: 10px; 
     border-bottom: 1px solid #000; 
    } 

    .answer { 
     padding: 5px; 
    } 


</style> 

<script> 



    $(document).ready(
     function() 
     { 
      //Hide all the answers on page load. 
      $('.answer').hide(); 

      //For all questions, add 'open'/'close' text. 
      //You can replace it with an image if you like. 
      //This way, you don't need to specify img tag in your HTML for each question. 
      $('.question') 
       .append(' <span>[ open ]</span>'); 


      //Now there are two ways to toggle the visibility of answer. 
      //Either click on the question OR click on Open All/Close All link. 
      //To use the same code for both instances, we will create 
      //a function which will take the 'question' div and toggle the answer for it. 
      //Advantage of this approach is that the code to toggle the answer is in 
      //one place. 

      //By default, this function will try to toggle the status of the answer 
      //i.e. if it's visible, hide it otherwise show it. 
      //This function will take a second argument called 'showAnswer'. 
      //If this argument is passed, it overrides the toggle behavior. 
      //If 'showAnswer' is true, answer is shown. 
      //If it's false, answer is hidden. 
      //This second parameter will be used by the 'openAll', 'closeAll' links. 
      var toggleAnswer = function toggleAnswer(question, showAnswer) 
      { 
       //The way I have structured the HTML, answer DIV is right after 
       //question DIV. 
       var $answer = $(question).next('div'); 

       //Animation callback, after the animation is done, we want to 
       //switch the 'text' to display what could the user do with the question. 
       //Once again, you can change this code to show open/close image. 
       var updateText = function() 
           { 
            var text = $answer.is(':visible') ? ' [close] ' : ' [open] '; 
            $(question).find('span').html(text); 
           } 

       var method = null; 

       if(arguments.length > 1) 
       { 
        //If the function was called with two arguments, use the second 
        //argument to decide whether to show or hide. 
        method = showAnswer === true ? 'show' : 'hide'; 
       } 
       else 
       { 
        //Second argument was not passed, simply toggle the answer. 
        method = $answer.is(':visible') ? 'hide' : 'show'; 
       } 

       $answer[method]('fast', updateText); 
      }; 

      //On each question click, toggle the answer. 
      //If you have noticed, I didn't enclose both Q&A inside one DIV. 
      //The way you have done if user clicks on the answer, answer will collapse. 
      //This may not be desirable as user may want to copy the answer 
      //and he won't be able to. 
      $('.question').click(function(){ toggleAnswer(this);}); 

      //We will reuse the same toggleAnswer method in openAll, closeAll 
      //handling. This way, if you want to change behavior of how the question/answers 
      //are toggled, you can do it in one place. 
      $('#openClose').click(
       function() 
       { 
        var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false; 
        $('.question').each(function() { toggleAnswer(this, showAnswer); }); 
        $(this).html(showAnswer ? 'Close All' : 'Open All'); 
        return false; 
       } 
      ); 

     } 
    ); 
</script> 
<html> 
<head> 
<title>simple document</title> 
</head> 
<body> 

<a id='openClose' href='#'>Open All</a> 

<br /><br /> 

<div class='question'>Question 1</div> 
<div class='answer'>Answer 1</div> 

<div class='question'>Question 2</div> 
<div class='answer'>Answer 2</div> 

<div class='question'>Question 3</div> 
<div class='answer'>Answer 3</div> 

</body> 
</html>

Quelle

2009-07-31 04:56:35 SolutionYogi

Danke, dass Sie sich die Zeit nehmen, dies zu schaffen. Ich werde das heute später versuchen und berichten. In meiner Version schalte ich die Funktion Alle öffnen/Alle schließen um. Es ist sauberer und benutzerfreundlicher, da Sie Ihre Maus nicht bewegen müssen.

Quelle

2009-07-31 14:58:41

Redsquare und Lösung Yogi:

Danke. Ich werde später erneut antworten und auch eine funktionierende Demo veröffentlichen, damit Sie das Problem besser sehen können. Tut mir leid, ich hätte das schon mal machen sollen.

Liz

Quelle

2009-07-31 15:03:11

Liz, bitte nutzen Sie Kommentare, um Ihren Kommentar zu einer bestimmten Antwort zu posten. Ich habe auch meinen Code aktualisiert, um einzelne "Öffnen/Schließen" -Links zu verwenden. – SolutionYogi

JQuery toggle Q & A: individuelle Q & A funktionieren nicht korrekt, wenn Sie auf Alle öffnen/Alle zuerst klicken

Antwort

Verwandte Themen