variable in append - Feld auslesen

APunktHaas · 10. Feb. 2014

Hallo zusammen,

eine blöde Frage eines blutigen Anfängers:

Ich habe auf meinen HTML-Seiten ein dropdown-Menü, das per Javascript erzeugt wird.

Jetzt möchte ich, dass es mir auf der jeweiligen HTML-Seite statt "-select" angezeigt wird, auf welcher Seite ich mich gerade befinde.

Kann ich in die append-Zeile statt einem festen Text (hier: "-select") einen Text aus meiner HTML auslesen lassen?

Danke schon mal...

Hier der Code:

HTML:

HTML:

<div class="wpb-menu-container" >
  <ul class="wpb-main-menu" >
          <li><a href="01.html" class="active">01</a></li>
          <li><a href="02.html" >02</a></li>
          <li><a href="03.html">03</a></li>
          <li><a href="04.html">04</a></li>
   </ul>
</div>

JAVASCRIPT:

HTML:

jQuery(document).ready(function($){
    var main_menu_container = $('.wpb-menu-container');
  
  // On hover display children
  $('.wpb-main-menu>li').hover(function(){
    var li = $(this);
    var sub = $('.wpb-main-menu-child', li);

    if ($(sub).length) {
      $(sub).fadeIn(300);
    }
    
  }, function(){
    var li = $(this);
    var sub = $('.wpb-main-menu-child', li);
    
    if ($(sub).length) {
      $(sub).stop().fadeOut(300);
    }
  });
  
  // Generate Responsive DropDown Menu
  $(main_menu_container).append('<select class="wpb-dropdown-menu"></select>');
  
  $('.wpb-dropdown-menu', main_menu_container).append('<option value="#">- select -</option>');
  
  $('.wpb-main-menu>li').each(function(i, item) {
    var list = $(item);
    var main_menu = $(item).parent();
    var menu_item = $('a', item);
    var item_link = $(menu_item).attr('href');
    var item_id   = $(menu_item).attr('id');
    
    if (item_link == '#') {
      // SmoothScroll
      $('.wpb-dropdown-menu', main_menu_container).append('<option value="#" class="smoothscroll" id="' + item_id + '">' + menu_item.html() + '</option>');
    } else {
      // Reload
      $('.wpb-dropdown-menu', main_menu_container).append('<option value="' + item_link + '">' + menu_item.html() + '</option>');
    }
    
    var sub = $('ul.wpb-main-menu-child', list);

    if ($(sub).length) {
      $('li', sub).each(function(i, item) {
        var menu_item = $('a', item);
        var item_link = $(menu_item).attr('href');
        var item_id   = $(menu_item).attr('id');
        if (item_link == '#') {
          // SmoothScroll
          $('.wpb-dropdown-menu', main_menu_container).append('<option value="#" class="smoothscroll" id="' + item_id + '">- ' + menu_item.html() + '</option>');
        } else {
          // Reload
          $('.wpb-dropdown-menu', main_menu_container).append('<option value="' + item_link + '">- ' + menu_item.html() + '</option>');
        }
      });
    }
    
  });
  
  
  $('.wpb-dropdown-menu').change(function() {
    var href = $(this).val();
    var id = $(this).children(':selected').attr('id');
    console.log(id);
    if (href == '#') {
      // SmoothScroll
      $('html, body').animate({scrollTop: $('.' + id).offset().top - 0}, 'slow');
    } else {
      // Reload
      window.location = href;
    }
  });
  

});

kkapsner · 10. Feb. 2014

Ja, das kannst du machen - so wie du es 11 Zeilen darunter gemacht hast...

APunktHaas · 11. Feb. 2014

Danke schonmal, kkapsner!
Der Code ist Teil meines Templates, davon hab ich nichts selbst geschrieben. Meine Fähigkeiten beschränken sich leider auf HTML und CSS.
Ich hab jetzt versucht, die komplette Zeile zu ersetzen, das hat leider nicht funktioniert.
Auch das Ersetzen von
-select-
durch
' + menu_item.html() + '
hat keinen Erfolg gebracht.
In beiden Fällen hat das Dropdown keinen Eintrag mehr.

kkapsner · 11. Feb. 2014

Du darfst natürlich nicht eins zu eins übernehmen, sondern musst dir zuerst überlegen, was du aus deinem HTML auslesen willst.
Zeig' doch mal das relevante HTML.

APunktHaas · 11. Feb. 2014

gern:

HTML:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->

<html lang="en">
<!--<![endif]-->

<head>
    <!-- Site Description -->
    <meta name="description" content=""><!-- Site Author -->
    <meta name="author" content=""><!-- site charset -->
    <meta charset="utf-8"><!-- viewport for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2">
    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style.responsive.css">

    <title></title>
</head>

<body class="wpb-portfolio-body" onload="chkJsOK()">
    <!-- Fixed Logo & Menu Bar Start -->

    <section class="wpb-top-bar" style="order:thin solid white; ">
        <div class="container" style="order:thin solid orange; ">
            <div class="span3 wpb-logo-container" style="order:thin solid red; ">
                <a href="index.html"><img src="logo4.jpg"></a>
            </div><!-- Menu -->

            <div class="span9 wpb-menu-container" style="order:thin solid yellow; ">
                <ul class="wpb-main-menu" style="order:thin solid green; ">
                    <li><a href="01.html" class="active">01</a></li>

                    <li><a href="02.html">02</a></li>

                    <li><a href="03.html">03</a></li>

                    <li><a href="04.html">04</a></li>
                </ul>
            </div>
        </div>
    </section><!-- JavaScript -->
    <script type="text/javascript" src="js/jquery.js">
</script><!-- jQuery -->
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js">
</script><!-- BootStrap -->
    <script type="text/javascript" src="js/assets/jquery.partners.js">
</script><!-- jQuery Partners List -->
    <script type="text/javascript" src="assets/flexslider/jquery.flexslider-min.js">
</script><!-- FlexSlider -->
    <script type="text/javascript" src="js/assets/parallax.js">
</script><!-- Parallax Background -->
    <script type="text/javascript" src="js/assets/elastislide/jquerypp.custom.js">
</script><!-- ElastiSlide -->
    <script type="text/javascript" src="js/assets/elastislide/jquery.elastislide.js">
</script><!-- ElastiSlide -->
    <script type="text/javascript" src="js/assets/responsive.menu.js">
</script><!-- Responsive Menu -->
    <script type="text/javascript" src="js/assets/isotope.min.js">
</script><!-- IsoTope -->
    <script type="text/javascript" src="assets/jquery-ui/jquery-ui-1.10.3.custom.min.js">
</script><!-- jQuery UI -->
    <script type="text/javascript" src="js/common.js">
</script><!-- Common -->
</body>
</html>

APunktHaas · 11. Feb. 2014

Es könnte auch durchaus eine Variable eines separaten div-Containers ausgelesen werden,
z.B.

Code:

<div id="NAME"></div>

Eleganter wäre allerdings natürlich, wenn die Bezeichnung der aktiven Seite ausgelesen würde, hier "NAME":

Code:

<li><a href="01.html" class="active">NAME</a></li>

j-l-n · 11. Feb. 2014

Da du ohnehin nur den HTML5-Doctype

HTML:

<!doctype html>

verwendest, kann auch der ganze Teil raus:

HTML:

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->

PS: Es gibt auch eine extrem fortschrittliche Funktion im Foren-Editor, die die Übersichtlichkeit erhöht. Nennt sich Code-Tags

APunktHaas · 11. Feb. 2014

Gut zu wissen, Julian, danke!

kkapsner · 11. Feb. 2014

Willst denn denn, dass da wirklich der Text anstatt dem "-select-" drin steht oder hättest du gern, dass die aktuelle Seite im <select> ausgewählt ist.

Um das Erstere zu machen, musst du dir einen CSS-Selektor überlegen, der das aktiver <a> anspricht, und dann kannst du über

Code:

$("DEIN SELEKTOR").html()

dessen HTML auslesen.
Bei Zweiterem musst du in der Schleife, die die <option>s erzeugt, jedesmal prüfen, ob das gerade angeschaute <a> die CSS-Klasse "active" hat, und dann, gegebenen Falls, dem zu dem neu erzeugten HTML ein "selected" hinzufügen.

PS: bearbeite doch bitte deinen Eintrag und füge die

Code:

-Tags ein, dann wir das viel leserlicher.

APunktHaas · 12. Feb. 2014

kkapsner schrieb:
Bei Zweiterem musst du in der Schleife, die die <option>s erzeugt, jedesmal prüfen, ob das gerade angeschaute <a> die CSS-Klasse "active" hat, und dann, gegebenen Falls, dem zu dem neu erzeugten HTML ein "selected" hinzufügen.

Das war wahrscheinlich undeutlich von mir formuliert.

Ich möchte, dass in der test01.html

HTML:

 <div class="span9 wpb-menu-container" style="order:thin solid yellow; ">
                <ul class="wpb-main-menu" style="order:thin solid green; ">
                    <li><a href="test01.html" class="active">NAME1</a></li>

                    <li><a href="test02.html">NAME2</a></li>

                    <li><a href="test03.html">NAME3</a></li>

                    <li><a href="test04.html">NAME4</a></li>
                </ul>
            </div>
        </div>

NAME1 im dropdown erscheint und bei test02.html

HTML:

            <div class="span9 wpb-menu-container" style="order:thin solid yellow; ">
                <ul class="wpb-main-menu" style="order:thin solid green; ">
                    <li><a href="test01.html">NAME1</a></li>

                    <li><a href="test02.html" class="active">NAME2</a></li>

                    <li><a href="test03.html">NAME3</a></li>

                    <li><a href="test04.html">NAME4</a></li>
                </ul>
            </div>
        </div>

solle NAME2 im dropdown erscheinen. Genauso natürlich bei test3 und test3.

Mit $("active") steht ja leider bei jeder Seite NAME1 im Feld.

Hätte gehofft, dass das einfacher ist...

Wieviel Aufwand würde das für dich bedeuten?

kkapsner · 12. Feb. 2014

In $(".active").html() steht bei der test02.html "NAME2" drin, da dieses <a> die CSS-Klasse "active" hat...

Aber es ist immer noch nicht klar, was du mit "im dropdown erscheinen" genau meinst.

PS: $("active") wird gar nichts liefern, da es kein HTML-Element <active> gibt.

APunktHaas · 12. Feb. 2014

danke, das probiere ich mal aus...
"im dropdown erscheinen" heisst in diesem Fall:
momentan steht bei mir auf jeder Seite im dropdown "-select-".
Andreas Haas - Kamera & Multikopter (Fenster klein skalieren)
Ich möchte, dass man im Dropdown sieht, wo auf der Seite man sich gerade befindet.
so wie hier:
Topshot - Die fliegende Kamera

Das waren unterschiedliche Templates, in dem einen gings, im anderen nicht. Doof...

kkapsner · 13. Feb. 2014

Ah - jetzt ist klar, was du willst. Zeig' das nächste mal doch das Beispiel gleich...

Dazu musst du bei der Stelle, wo die <option>s erzeugt werde mit https://api.jquery.com/hasClass/ prüfen, ob menu_item die Klasse "active" hat und dann das selected="selected" ins HTML dazubauen. Genau so ist das ja auf der Seite, wo es funktioniert auch gemacht worden - kannst es dir ja im Quelltext mal genauer ansehen.

variable in append - Feld auslesen

APunktHaas

New member

kkapsner

Super Moderator

APunktHaas

New member

kkapsner

Super Moderator

APunktHaas

New member

APunktHaas

New member

j-l-n

Guest

APunktHaas

New member

kkapsner

Super Moderator

APunktHaas

New member

kkapsner

Super Moderator

APunktHaas

New member

kkapsner

Super Moderator