Question

我创建了一个html css javascript，当您选择一个选项时是一棵树，在此示例中，只有两个选项可见（根据选择的第一个选项）。

问题是，最后有一个按钮应该添加一个具有相同选项的新表单（行），以重新开始，当我单击该按钮时，它会添加新行，但脚本不起作用，我不知道该如何解决！

$("#addMore").click(function() {
  $(".row-fluid:last").clone().appendTo(".wrapper");
});

$("#produse").change(function() {
  var $this = $(this),
    value = $this.val(); // save value
  $('.sub_select_class').hide(); // we hide every second select
  switch (value) { // we show only what needs to be visible
    case 'Canapele':
      $("#ModeleCanapele").show();
      break;
    case 'Coltare':
      $("#ModeleColtare").show();
      break;
    case 'Mobila':
      $("#ModeleMobila").show();
      break;
    case 'Fotolii':
      $("#ModeleFotolii").show();
      break;
    case 'Seturi':
      $("#ModeleSeturi").show();
      break;
      // ...etc
  }
});

#ModeleColtare,
#ModeleSeturi {
  display: none;
}

.new-rect {
  background: black;
  width: 100%;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row-fluid">
    <table style="font-size:10px">
      <tbody>
        <tr>
          <td>
            <select id="Volum">
              <option value="1x ">1x </option>
              <option value="2x ">2x </option>
              <option value="3x ">3x </option>
              <option value="4x ">4x </option>
              <option value="5x ">5x </option>
              <option value="6x ">6x</option>
            </select>
          </td>
          <td>
            <select id="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select id="ModeleColtare" class="sub_select_class">
              <option value="Coltar Vera">Coltar Vera</option>
              <option value="Coltar Onix">Coltar Onix</option>
              <option value="Coltar Olyve">Coltar Olyve</option>
              <option value="Coltar Adrian">Coltar Adrian</option>
            </select>
          </td>
          <td>
            <select id="ModeleSeturi" class="sub_select_class">
              <option value="Set Dana">Set Dana</option>
              <option value="Set Ramona">Set Ramona</option>
              <option value="Set Gina">Set Gina</option>
              <option value="Set Olyve">Set Olyve</option>
            </select>
          </td>
          <td>
            Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
          <td>
            <button id="filter" name="filter" onclick="resetFunction()">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>
  <button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

Answer 1

ID必须是唯一的。使用课程
插入动态内容时需要委派事件处理程序
干，不要重复自己

function resetFunction() { // not sure what you want here? 
  $(this).closest(".row-fluid").remove(); 
}

$(function() {
  $("#addMore").click(function() {
    var $clone = $(".row-fluid:last").clone(true)
    $('.sub_select_class',$clone).hide(); // we hide every second select    
    $clone.appendTo(".wrapper");
  });

  $(".row-fluid").on("click",".filter", resetFunction);

  $(".row-fluid").on("change", ".produse", function() {
    var value = $(this).val(), // save value
        $parent = $(this).closest(".row-fluid");
    $('.sub_select_class',$parent).hide(); // we hide every second select
    $(".Modele" + value,$parent).show();
  });
});

.sub_select_class {
  display: none;
}

.new-rect {
  background: black;
  width: 100%;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row-fluid">
    <table style="font-size:10px">
      <tbody>
        <tr>
          <td>
            <select class="Volum">
              <option value="1x ">1x </option>
              <option value="2x ">2x </option>
              <option value="3x ">3x </option>
              <option value="4x ">4x </option>
              <option value="5x ">5x </option>
              <option value="6x ">6x</option>
            </select>
          </td>
          <td>
            <select class="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select class="ModeleColtare sub_select_class">
              <option value="Coltar Vera">Coltar Vera</option>
              <option value="Coltar Onix">Coltar Onix</option>
              <option value="Coltar Olyve">Coltar Olyve</option>
              <option value="Coltar Adrian">Coltar Adrian</option>
            </select>
          </td>
          <td>
            <select class="ModeleSeturi sub_select_class">
              <option value="Set Dana">Set Dana</option>
              <option value="Set Ramona">Set Ramona</option>
              <option value="Set Gina">Set Gina</option>
              <option value="Set Olyve">Set Olyve</option>
            </select>
          </td>
          <td>
            Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
          <td>
            <button class="filter" name="filter">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>
  <button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

Answer 2

问题在于您正在生成新行，但仍在引用第一行（而您是通过天真的使用Ids来做到这一点）。相反，您的代码一次只需要在特定的一行上进行操作-因此，我已经编辑了您的代码以传递对该行的引用，然后我们可以使用相同的JQuery选择器，但是从引用的行开始。

注意：其他几个人一直指责使用重复的ID，但显然这不是问题所在。事实是您可以使用重复的ID ，在这种情况下通常这样做。

需要明确的是，当前的HTML规范确实声明：

如果id值不是空字符串，则它在文档中必须是唯一的。 ref

但是，作为separate stack exchange discussion notes，实际上并非如此（可能永远不会这样）。实际上，仅希望ID在范围内（例如在可重用组件（即您的可克隆<tr>）内）是唯一的。

$("#addMore").click(function() {
  var newRow = $(".row-fluid:last").clone();
  
  newRow.appendTo(".wrapper");
  
  newRow.find('.sub_select_class').hide();
  
  newRow.find( "#produse" ).change(function(){
    produseChange(this, newRow);
  });
});


$("#produse").change(function() {
  produseChange(this, $('tr')); 
});


function produseChange(self, row)  {
  var $this = $(self),
  value = $this.val(); // save value
  row.find('.sub_select_class').hide(); // we hide every second select
  switch (value) { // we show only what needs to be visible
    case 'Canapele':
      row.find("#ModeleCanapele").show();
      break;
    case 'Coltare':
      row.find("#ModeleColtare").show();
      break;
    case 'Mobila':
      row.find("#ModeleMobila").show();
      break;
    case 'Fotolii':
      row.find("#ModeleFotolii").show();
      break;
    case 'Seturi':
      row.find("#ModeleSeturi").show();
      break;
      // ...etc
  }
}

#ModeleColtare,
#ModeleSeturi {
  display: none;
}

.new-rect {
  background: black;
  width: 100%;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row-fluid">
    <table style="font-size:10px">
      <tbody>
        <tr>
          <td>
            <select id="Volum">
              <option value="1x ">1x </option>
              <option value="2x ">2x </option>
              <option value="3x ">3x </option>
              <option value="4x ">4x </option>
              <option value="5x ">5x </option>
              <option value="6x ">6x</option>
            </select>
          </td>
          <td>
            <select id="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select id="ModeleColtare" class="sub_select_class">
              <option value="Coltar Vera">Coltar Vera</option>
              <option value="Coltar Onix">Coltar Onix</option>
              <option value="Coltar Olyve">Coltar Olyve</option>
              <option value="Coltar Adrian">Coltar Adrian</option>
            </select>
          </td>
          <td>
            <select id="ModeleSeturi" class="sub_select_class">
              <option value="Set Dana">Set Dana</option>
              <option value="Set Ramona">Set Ramona</option>
              <option value="Set Gina">Set Gina</option>
              <option value="Set Olyve">Set Olyve</option>
            </select>
          </td>
          <td>
            Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
          <td>
            <button id="filter" name="filter" onclick="resetFunction()">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>
  <button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

Answer 3

当您将元素添加到页面时，它不会继承on'change'函数您还具有id =“ produse”，并且您将有重复的ID。将其更改为class =“ produse”，而不是id！您应该做的是将其包装在函数中...

$("#addMore").click(function(){   
    $(".row-fluid:last").clone().appendTo(".wrapper"); 
    initiateProduse() // add the effect to new row
});
    function initiateProduse(){
     $(".produse").off("change"); // remove on change effects so it doesn't have double on change effects on existing rows...
     $(".produse").change(function(){
        var $this = $(this), value = $this.val(); // save value
        $('.sub_select_class').hide(); // we hide every second select
        switch(value) { // we show only what needs to be visible
           case 'Canapele':
             $("#ModeleCanapele").show();
             break;
           case 'Coltare':
             $("#ModeleColtare").show();
             break;
             case 'Mobila':
             $("#ModeleMobila").show();
             break;
             case 'Fotolii':
             $("#ModeleFotolii").show();
             break;
             case 'Seturi':
             $("#ModeleSeturi").show();
             break;
           // ...etc
        }
     });
    }

    initiateProduse() // initiate the change effect on page load

现在，仍然会有问题...所有“ #Modele ....”显示效果将不起作用，因为存在重复的ID。您需要一种方法来指定需要使用的WHICH元素...

我推荐属性。您可以给每个选择/输入一个类似于ModeleCanapele =“ 1”的值，然后在添加第二行时，它将具有ModeleCanapele =“ 2”

然后您会做类似...

$("[ModeleCanapele='"+newRowNumber+"']").show();

您可以通过执行以下操作来跟踪rowNumber ...

<select class="produse" rowNumber="1">

第一个...

在您使用的新功能中，您可以...

var rowNumber = $(this).attr('rowNumber')
$('[sub_select_class="'+rowNumber+'"]').hide(); // change to attribute instead of class select 
switch(value) { // we show only what needs to be visible
           case 'Canapele':
             $("[ModeleCanapele='"+rowNumber+"']").show();
             break;

要设置新行号，我们将执行以下操作...

$("#addMore").click(function(){   
    var rows = $(".produse").length,
    newRowNumber = rows + 1
    $(".row-fluid:last").clone().appendTo(".wrapper")
    // make sure all of the rowNumber attributes = newRowNumber here
    initiateProduse() // add the effect to new row
});

我没有足够的时间为您完成所有代码，但这是您可以做到的方式。您需要确保每个单独的选择/输入都具有属性和类标识符，而不是ID，并确保每次添加行时都会添加行号（+1）

一种更简单的方法是将HTML模板实际包含在JS中，这样您就可以每次使用一个变量来设置新的行号（而不是使用clone）

Answer 4

您正在使用ID。尝试用类替换它们。当jQuery将选择器用作id时，它将始终只是一个元素。

javascript添加新表格

4 个答案: