Динамически генерировать внутренние кнопки для кнопок внешнего класса, используя jquery - PullRequest
Новая
       4

Динамически генерировать внутренние кнопки для кнопок внешнего класса, используя jquery

0 голосов
/ 26 апреля 2018

Я хотел бы динамически генерировать внутренние кнопки внутри родительской кнопки или элемента 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>

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Я не хочу редактировать свой ответ, потому что это немного другой вопрос, который вы задали.Итак, вот ответ для:

Привет, я хочу создать различные наборы без определения # set0, # set1 и так далее.Я пытался реализовать ваше решение, как указано выше, но безуспешно :( Я хочу, чтобы html контент определялся только один раз. 

<!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>
0 голосов
/ 26 апреля 2018

Как заменить элемент, который является объектом span, на другой набор кнопок?

просто очистите содержимое и замените его новым набором кнопок: 

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

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

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

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

в вашем случае, если я правильно понял ваш вопрос, это выглядит примерно так:

обратите внимание, что некоторые идентификаторы повторяются (# 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...