javascript - 使用jquery为外部类按钮动态生成内部按钮-6ren

javascript - 使用jquery为外部类按钮动态生成内部按钮

转载作者：太空宇宙更新时间：2023-11-04 01:16:32

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

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

我如何替换 span 对象的元素以具有另一组按钮？

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

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

最佳答案

我不想编辑我的答案，因为它与您提出的问题有点不同。所以这里是答案:

hi I want to generate different sets without defining #set0, #set1 and so on. I tried to implement your solution as above mentioned but no luck:( i want html content to be defined only once.

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

关于javascript - 使用jquery为外部类按钮动态生成内部按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50036077/

文章推荐： c - volatile 不会阻止变量被优化

文章推荐： c - 为什么我的代码没有向这个链表中插入一个新节点？

文章推荐： python - 测试后销毁 Python 中的模拟

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用jquery为外部类按钮动态生成内部按钮