Toggle eine Reihe von Divs auch die Änderung der Verbindung

Ich habe eine Reihe von divs, identifiziert mit einer ID beginnend mit einer Zeichenfolge (kind = "Marke"). Ich möchte die Sichtbarkeit der divs umschalten, indem ich innerhalb eines Bereichs auf einen href klicke. Ich möchte, dass der Text dieses Links von "SHOW" zu "HIDE" wechselt.Toggle eine Reihe von Divs auch die Änderung der Verbindung

Ohne die Änderung des Textes ist die Funktion nur onle Linie:

jQuery("#" + kind + "-" + value).toggle();

aber mit dem Text kann ich nicht um eine Zeile nach anderem, bis fast 15 Zeilen Code hinzufügen. Sicherlich ist es viel einfacher.

Aktualisiert Code

  function show_hide(brand, value){ 
       var show_hide_text = ["SHOW", "HIDE"]; 
       var id_selected = jQuery("#" + brand + "-" + value).attr("id"); 
       jQuery('div[id ^= "' + brand + '"]').each(function() { 
        if(this.id != id_selected){ 
         jQuery(this).hide(); 
         jQuery("#" + this.id.replace("-", "-show-")).html(show_hide_text[0]); 
        }else{ 
         var visi = (jQuery("#" + brand + "-show-" + value).html() == show_hide_text[0]) ? 1 : 0; 
         jQuery("#" + brand + "-show-" + value).html(show_hide_text[visi]); 
        } // if 
       }); 
       jQuery("#" + brand + "-" + value).toggle(); 
      } // function

Der HTML-Code wie dieser (nur ein div gezeigt) gehen würde:

<div ><h3 >SUPER BRAND <a href="javascript: void(0);" onClick="hide_show('brand', 'Super-brand');"><span id=brand-show-Super-brand">SHOW</a></span></h3> 
     <div class="brand" id="brand-Super-brand"> 
      <div>PRODUCT #1</div> 
     </div> 
    </div> 

    <div ><h3 >MEGA BRAND <a href="javascript: void(0);" onClick="hide_show('brand', 'Mega-brand');"><span id=brand-show-Mega-brand">SHOW</a></span></h3> 
     <div class="brand" id="brand-Mega-brand"> 
      <div>PRODUCT #3</div> 
     </div> 
    </div> 

...

Quelle

2016-08-16 Cesar

Könnten Sie examaple HTML-Code? – jacqbus

HTML hinzugefügt, um die Frage – Cesar

Ich bin mir nicht sicher, ob ich dich richtig verstehe, aber hier ist Code. HTML wird auch ein wenig verändert.

$(document).ready(function(){ 
 
    var show_hide_text = ["SHOW", "HIDE"]; 
 
    $('.show-hide-content').hide(); 
 
    $('.show-hide-toggle').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var $content = $(this).parent().next('.show-hide-content'); 
 
    $('.show-hide-content').not($content).hide().prev().children('a').text(show_hide_text[0]); 
 
    $content.toggle(); \t // Toggle visible 
 
    $(this).text(show_hide_text[+$content.is(':visible')]); \t // Change text 
 
    }); 
 
});

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>StackOverflow Testing Page</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
    <div> 
 
     <h3>SUPER BRAND <a href="#" id="brand-show-Mega-brand" class="show-hide-toggle">SHOW</a></h3> 
 
     <div class="brand show-hide-content" id="brand-Super-brand"> 
 
     <div>PRODUCT #1</div> 
 
     </div> 
 
    </div> 
 

 
    <div> 
 
     <h3>MEGA BRAND <a href="#" id="brand-show-Mega-brand" class="show-hide-toggle">SHOW</a></h3> 
 
     <div class="brand show-hide-content" id="brand-Mega-brand"> 
 
     <div>PRODUCT #3</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-08-16 13:00:52 jacqbus

Das Problem ist, dass, wenn Sie auf eine Marke klicken, das andere div auch mit seinem: visible auf false umschalten muss, und auch der Text muss sich von "HIDE" zu "SHOW" ändern. Wenn Sie auf eine Marke klicken, sehen Sie die andere. Ich habe meinen Code auf 11 Zeilen anstelle Ihrer 7 reduziert, sehe aber immer noch zu viel Code. – Cesar

Also, wenn Sie auf eine Marke klicken, möchten Sie alle Divs mit der gleichen Marke öffnen? oder willst du nur diese eine Marke öffnen und jeden anderen verstecken? – jacqbus

Genau, das letzte Verhalten. Ich aktualisiere den Code oben auf das, was ich habe, das ist das Minimum, das ich erreichen konnte. – Cesar

einfach eine Klasse zu Ihrem LINK hinzufügen, damit Sie wissen, ob es zu sein, ist gezeigt oder nicht. Außerdem können Sie die „beginnt mit“ von JQuery identify objects that start with:

$("#YourLinkID").click(function(kind,value){ 

    // Your previous code. 
    // 
    if($(this).hasClass("show")) 
    { 
     if($(this).html("Your HTML for Hide Link")); 
     $(this).removeClass("show"); 
    } 
    else 
    { 
     if($(this).html("Your HTML for Show Link")); 
    } 

    } 
});

keine Chance hatte, den Code zu testen, aber Sie bekommen die Idee von ihm. Wenn Sie es noch brauchen, lassen Sie es mich bitte wissen und ich werde versuchen, es zu einem funktionierenden Beispiel zu machen.

Quelle

2016-08-16 12:24:09 ProgrammerV5

Das Problem ist, wenn Sie auf einen anderen Link klicken, sollte es alle anderen divs umschalten. Ich habe auf 10 Zeilen Code reduziert, muss aber trotzdem die Sichtbarkeit bekommen. Ich werde veröffentlichen, wenn ich eine bessere Lösung finde, habe ich über Ihren Ansatz des Entfernens oder Hinzufügens von Klassen nachgedacht, aber es ist nur der Text, der betroffen ist, so dass es irgendwie unnötig erscheint, dieses Niveau zu erreichen. Danke für den Start mit Tipp, es ist sehr nützlich. – Cesar

Toggle eine Reihe von Divs auch die Änderung der Verbindung

Antwort

Verwandte Themen