引导按钮组 - 下拉菜单和“显示”按钮

Question

我有一个按钮

<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> 

，并在下拉列表中，当用户选择一个选项，它应该更改按钮的名称面板

$(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> 

但它也会更改Edit按钮的名称。我不知道我在做什么错误:(可以将左侧的下拉菜单和右侧的Show按钮分组，并根据选择更改左侧按钮名称，而不影响其余按钮，并且还要显示根据选择一个弹出当用户按下Show（每个选择都有自己的弹出式）？

我很新的JavaScript编程所以请温柔:)

Answer 1

你的代码是行不通的，因为你CSS选择器.btn:first-child正在选择多个btn元素，从而更新多个按钮文本。

如果你想更新切换按钮，你可以这样做，如下所示。

你可以在你的jQuery中使用这个选择器.btn.dropdown-toggle 选择切换按钮。

我建议你在按钮上添加一个id并使用id来选择它。

代码片段

$(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>