Steuerung von Textareafeldern über ID fehlerhaft

Iago2 · #1 (**permalink**) 07.04.2020, 12:14

Hallo,

Ich lese Überschriften und Text aus einer JSON-Datei aus. Die Überschriften hab ich in einer Liste (linke Box). Die Textaraes hab ich zunächst mit display:none in einer rechten Box.
Die IDs der <li><a> Elemente (links) und der <textarea> (rechts) stimmen überein.

Jetzt versuche ich beides zusammenzubringen, sodass ich mit onclick links, ein Textfeld öffnen kann (selbe ID) Hier ist meine Ansatz, der noch dfhlerhaft ist.
Weiss jemand hier weiter? Vielen Dank.

Code:

$('.headlines').click(function() {
		     
	        id = $(this).attr("data-textId");
	       
	        if($('.myTextareas').attr('idTextarea').val() == id) {
	            
	            $('.myTextareas').toggleClass('.showTextarea');
	        }
	        
	        
	        $(id).val('');		     
	      
	  });

die Textareas erzeuge ich so:

PHP-Code:


			
  if($k == 'text')  {



echo " <textarea class='form-control myTextareas' idTextarea='text".$j.$i."' rows='3'>".$v."</textarea>";



$i++;

                    }

cloned · #2 (**permalink**) 07.04.2020, 13:29

Wie schaut dein html aus? PHP code ist für dein Problem irrelevant, der wird nicht vom JS fr die Ausführung verwendet.

Iago2 · #3 (**permalink**) 07.04.2020, 23:42

Zitat:

Zitat von cloned

Wie schaut dein html aus? PHP code ist für dein Problem irrelevant, der wird nicht vom JS fr die Ausführung verwendet.

Bingo!
PHP macht mir in der Regel auch keine Kopfschmerzen!

JS Console error: Uncaught TypeError: Cannot read property 'val' of undefined

Ja gut, JQuery weiss ja gar nicht, welches der $('.myTextareas') gemeint ist.

HTML-Code:

	<body>
	    <div class="container border border-primary">
	     <div class="row"> 
	     
	      <div class="col-sm-8">
        <h1>Cherry Picks 2.0</h1>
            </div>
            </div>
        
          <div class="row">
           <div class="col-sm-4 sections-box">
         
                
<?php     showSections($obj);     ?>


      </div>
                
            <div class="col-sm-8 border border-primary">
                <form>
                     <div class="form-group">
    <label for="Textarea1">Example textarea</label>
    

        
        <?php showTextarea($obj); ?>
        
    
  </div>
             <button class="btn btn-primary update" type="submit">Enter text</button>        
                    
                </form>
                
            </div>
          </div> 
        </div>
  
  <!-- JQuery -->    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>		
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
		
	
		<script type="text/javascript">
		
	  $('.accordion').click(function() {
         
         var $this = $(this).toggleClass('active');
         var $panel = $this.next().toggleClass('show');
        // $('.accordion.active').not(this).removeClass('active').next().removeClass('show');
       
	      
	  });
		
		 $('.headlines').click(function() {
		     
	        id = $(this).attr("data-textId");
	       
	        if($('.myTextareas').attr('idTextarea').val() == id) {
	            
	            $('.myTextareas').toggleClass('.showTextarea');
	        }
	        
	        
	        $(id).val('');
		     
		
	      
	  });
		
		
		
		$.ajax ({
			
		
			
			});
	
	</script>
		
		
		
		
	</body>

Iago2 · #4 (**permalink**) 08.04.2020, 01:31

Ok, also der Code funktioniert, ich habe das Attribut data-textareaId anstatt idTextarea.

Der nächste Schritt ist dann toggleClass anstatt css anzuwenden.

Code:

 $('.headlines').click(function() {
		     
	        id = $(this).attr("data-textId");
	    
	       $('.myTextareas').each(function() {
	           
	           if($(this).attr("data-textareaId") == id) {
	           
	                $(this).css("display","block");
	                $('.myTextareas').not(this).css("display","none");
	           }
	           
	       });

cloned · #5 (**permalink**) 08.04.2020, 08:47

Du brauchst hier kein .each(), du kannst es auch folgendermaßen schreiben:

Code:

$('.headlines').on('click', function() {
  const id = $(this).data('textId');
  $('.myTextareas').hide().filter('[data-textareaId="'+id+'"]').show();
});

Ungetestet, aber so sollte es funktionieren.

Iago2 · #6 (**permalink**) 09.04.2020, 00:41

Zitat:

Zitat von cloned

Du brauchst hier kein .each(), du kannst es auch folgendermaßen schreiben:

Code:

$('.headlines').on('click', function() {
  const id = $(this).data('textId');
  $('.myTextareas').hide().filter('[data-textareaId="'+id+'"]').show();
});

Ungetestet, aber so sollte es funktionieren.

O.k., danke, macht Sinn! Ich hab an toggleClass gedacht, damit ich CSS-Effekte einbauen kann. Ich versuche das mal nachzubauen auf Grund der Funktion, die ich für das Akkordion habe.

cloned · #7 (**permalink**) 09.04.2020, 08:19

.toggleClass ist sehr praktisch und soll auch verwendet werden. Für einfaches ein- ausblenden hat jQuery aber auch show()/hide() bzw slideIn()/slideOut()/slideToggle() anzubieten.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Accordion / Felder Anordnung, Steuerung funktioniert nicht	Iago2	Javascript & Ajax	27	15.02.2020 14:03
Brauche Hilfe bei Steuerung	Synonym123	CSS	6	14.02.2012 20:20
IE7: input-text nach zurückscrollen fehlerhaft angezeigt	eastsound01	CSS	0	10.12.2008 14:26
mit height - angabe darstellung in ie Internetexplorer fehlerhaft verschoben	mail	CSS	5	19.04.2007 15:53
Quelltext fehlerhaft?	Knuddelkamel	CSS	13	27.10.2004 00:14