使用jquery动态生成外部类按钮的内部按钮

时间：2018-04-26 06:21:46

标签： javascript jquery html css3

我想在父按钮或div元素内动态生成内部按钮。我有一个示例代码，我可以动态生成10个按钮。

如何在父元素中生成一组按钮，以动态再现结构10次？

如何将span对象元素替换为另一组按钮？

第一组脚本动态生成10个按钮。我希望有类似的功能来生成一个功能，我已经描述了在父元素中开发子按钮。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <script>
      $(document).on('click', '.btn btn-default', function(){
        alert(this.innerHTML);
      });

      var i=1;
      for(;i<=10;i++){
        $('<div/>', {
          'class':'btn btn-default',
          'html':'<span>Element'+i+'</span>'
        }).appendTo('body');
      }
    </script>
    <style>
      .myClass{
        background:#ccc;
        margin:10px;
        cursor:pointer;
      }
    </style>
    <br/>
    <div class="btn btn-default col-md-1 col-sm-1 col-xs-1">
      <br />
      <div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
      <!--<div class="container">-->
        <div class="row">
          <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-default">
            <input type="radio" name="options" id="option1" autocomplete="off" onchange="dataSegment(0)" checked>
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option5" autocomplete="off" onchange="dataSegment(4)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option6" autocomplete="off" onchange="dataSegment(5)">
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="btn btn-default col-md-1 col-sm-1 col-xs-1">
      <br />
      <div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
        <!--<div class="container">-->
        <div class="row">
          <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-default">
            <input type="radio" name="options" id="option1" autocomplete="off" onchange="dataSegment(0)" checked>
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option5" autocomplete="off" onchange="dataSegment(4)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option6" autocomplete="off" onchange="dataSegment(5)">
            </label>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

  

如何将span对象元素替换为另一组按钮？

只需清除内容并替换为新的按钮组：

$("#firstSet").contents().remove();

var i=1;
for(;i<=10;i++){
   $('<div/>', {
        'class':'btn btn-default',

        'html':'<span>Element'+i+'</span>'

   }).appendTo('#firstSet');
}

在你的情况下，如果我正确理解你的问题，那就是这样的事情：

请注意，你有一些id重复（＃option1，＃option2 ....）。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<br/>
    <div id="set0" style="border: solid 1px black">
          <br />
      <div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
      <!--<div class="container">-->
        <div class="row">
          <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-default">
            <input type="radio" name="options" id="option01" autocomplete="off" onchange="dataSegment(0)" checked>
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option02" autocomplete="off" onchange="dataSegment(1)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option03" autocomplete="off" onchange="dataSegment(2)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option04" autocomplete="off" onchange="dataSegment(3)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option05" autocomplete="off" onchange="dataSegment(4)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option06"   autocomplete="off" onchange="dataSegment(5)">
            </label>
          </div>
        </div>
      </div>
    </div>
    
    <br/>
    <div id="set1" style="border: solid 1px black">
          <br />
      <div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
      <!--<div class="container">-->
        <div class="row">
          <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-default">
            <input type="radio" name="options" id="option11" autocomplete="off" onchange="dataSegment(0)" checked>
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option12" autocomplete="off" onchange="dataSegment(1)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option13" autocomplete="off" onchange="dataSegment(2)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option14" autocomplete="off" onchange="dataSegment(3)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option15" autocomplete="off" onchange="dataSegment(4)">
            </label>
            <label class="btn btn-default">
            <input type="radio" name="options" id="option16"   autocomplete="off" onchange="dataSegment(5)">
            </label>
          </div>
        </div>
      </div>
    </div>

    <script>
        $(document).on('click', '.btn btn-default',                   function(){
            alert(this.innerHTML);
        });

        for(var j=0; j<2 ; j++){
          $("#set" + j).contents().remove();
        
          var i=1;
          for(;i<=10;i++){
              $('<div/>', {
                  'class':'btn btn-default',

                  'html':'<span>Element'+i+'</span>'

              }).appendTo("#set" + j);
          }
        }
    </script>

    <style>
      .myClass{
        background:#ccc;
        margin:10px;
        cursor:pointer;
      }
    </style>
</body>
</html>

答案 1 :(得分：1)

我不想编辑我的答案，因为你提出了一个不同的问题。 所以这里是答案：

  

嗨我想生成不同的集合而不定义＃set0，＃set1等等。我试图像上面提到的那样实现你的解决方案，但没有运气:(我希望html内容只定义一次。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<br/>
    <div id="areaForSets">
        
    </div>

    <script>
        $(document).on('click', '.btn btn-default',                   function(){
            alert(this.innerHTML);
        });

        var numOfSets = 3;
        var numOfButtons = 10;
        
        for(var j=0; j < numOfSets ; j++){
          // create the set
          var setElement = "<div style='border: solid 1px red' id='set" + j +"'>";
          
          // create its content
          var i=0;
          for(;i < numOfButtons; i++){
            var setContent = "<div class='btn btn-default'><span>Element" + (i+1) + "</span></div>";
            
            setElement += setContent;
          }
          
          //close set div
          setElement += "</div>";
          // append to dom
          $("#areaForSets").append(setElement + "<br/>");
        }
    </script>

    <style>
      .myClass{
        background:#ccc;
        margin:10px;
        cursor:pointer;
      }
    </style>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题