Bootstrap Knopfgruppen - Drop-Down und ‚Show‘ Button

Question

Ich habe ein Panel mit Tasten

<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left"> 
    <button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button> 
    <div class="btn-group btn" style="padding:0;"> 
      <div class="btn-group"> 
       <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Line</a></li> 
         <li><a href="#">Bar</a></li> 
        </ul> 
     </div> 
     <button class="btn btn-default">Show</button> 
    </div> 
</div> 

und für den Drop-Down, wenn der Benutzer eine Option wählt, soll er den Namen der Schaltfläche ändern

$(function() { 
    $(".dropdown-menu li a").click(function() { 

     $(".btn:first-child").text($(this).text()); 
     $(".btn:first-child").val($(this).text()); 
    }); 
}); 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true"> 
       <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
         </div> 
         <div class="modal-body"> 

         </div> 
         <div class="modal-footer"> 
          @*<button type="button" class="btn btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>*@ 
          <button type="button" class="btn btn-success" data-dismiss="modal">OK</button> 
         </div> 
        </div> 
       </div> 
      </div> 

, aber es ändert auch den Namen der Schaltfläche Edit. Ich weiß nicht, was ich falsch mache :(Es ist möglich, ein Dropdown-Menü in der linken und eine Show Schaltfläche auf der rechten Seite zu gruppieren, den Namen der linken Schaltfläche entsprechend der Auswahl zu ändern, ohne die restlichen Schaltflächen zu beeinflussen und auch anzuzeigen ein Pop-up auf der Auswahl basiert, wenn der Benutzer drückt Show (jede Auswahl hat seinen eigenen Pop-up)?

ich in JavaScript-Programmierung ziemlich neu bin so bitte sanft sein :)

Answer 1

Sie Code nicht funktioniert, weil Sie CSS Selektor .btn:first-child wählt mehrere btn Elemente aus und aktualisiert so den Text für mehrere Schaltflächen.

Wenn Sie die Umschalttaste aktualisieren möchten, können Sie dies wie folgt tun.

Sie können die Umschaltfläche mit diesem Wahlschalter .btn.dropdown-toggle in Ihrer Anfrage auswählen.

Ich würde vorschlagen, dass Sie eine ID zur Schaltfläche hinzufügen und wählen Sie es mit einer ID.

SNIPPET

$(function() { 
 
    $(".dropdown-menu li a").click(function() { 
 
    //$('.btn.dropdown-toggle').text($(this).text()); 
 
    $('#toggle').text($(this).text()); 
 
    }); 
 
$('#show').click(function(){ 
 
    var show = $('#toggle').text(); 
 
    alert(show); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left"> 
 
    <button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button> 
 
    <div class="btn-group btn" style="padding:0;"> 
 
    <button id="toggle" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#" data-toggle="modal" data-target="#myModal">Line</a></li> 
 
     <li><a href="#" data-toggle="modal" data-target="#myModal">Bar</a></li> 
 
    </ul> 
 
    <button id ="show" class="btn btn-default">SHOW</button> 
 
    </div> 
 
</div>