Fatal编程技术网
  • php/
  • Php 使用Jquery显示不同输入的唯一id/类增量

Php 使用Jquery显示不同输入的唯一id/类增量

php jquery html

Php 使用Jquery显示不同输入的唯一id/类增量,php,jquery,html,Php,Jquery,Html,我有一个表单，它目前作为一个单行工作，允许基于生产下拉列表的不同输入字段 i、 e.如果您选择CPE或CPM，您将获得印象和目标的输入。如果你选择Eggs2Go，那么你只会得到印象 虽然到目前为止这仍然有效，但如果我添加一行并使用下拉菜单，它会影响第一个ID标记更改该行，而不会影响新行选项 function showTargetCheck(that) { if (that.value == "CPM" || that.value == "CPE" || that.value ==

我有一个表单，它目前作为一个单行工作，允许基于生产下拉列表的不同输入字段

i、 e.如果您选择CPE或CPM，您将获得印象和目标的输入。如果你选择Eggs2Go，那么你只会得到印象

虽然到目前为止这仍然有效，但如果我添加一行并使用下拉菜单，它会影响第一个ID标记更改该行，而不会影响新行选项

function showTargetCheck(that) {
        if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
            document.getElementById("showTarget").style.display = "block";
            document.getElementById("showImpressions").style.display = "none";
        }

        else if (that.value == "EGGS") {
            document.getElementById("showImpressions").style.display = "block";
            document.getElementById("showTarget").style.display = "none";
        }

        else {
            document.getElementById("showTarget").style.display = "none";
            document.getElementById("showImpressions").style.display = "none";
        }
    }
是否有一种方法可以自动增加每条新线，以便showTarget和ShowImpressions单独运行

中的详细信息您不能在页面中重复ID，它们必须根据定义是唯一的

重复这样的行的常用方法是为类似的元素使用公共类，并通过查找父行元素，然后在该特定行中查找所需的元素来隔离事件处理程序中的实例

假设我们将所有重复ID更改为相同的类名，然后在jQuery中执行如下操作

$('#tableContainer').on('change', 'select', function(e){
  // get row instance starting from `this` 
  var $row = $(this).closest('.tableRow'),
      currVal = $(this).val(),
      // flags for toggling various classes 
      showImpressions = false,
      showTarget = false;

   if (currVal  == "CPM" || currVal  == "CPE" || currVal  == "SWIFT") {
      showTarget = true;
   }
   // other conditionals to set flags based on other values

   // now toggle display of instances of classes within row instance   
   $row.find('.showTarget').toggle(showTarget);
   $row.find('.showImpressions').toggle(showImpressions);

});
正如charlietfl所提到的，ID是唯一的。 使用现有的编码格式
  • 将所有id更改为类
  • 查找select标记的第二个父节点
  • 找到主parentNode后，查找需要更改的同级输入框

    下面的片段 
    /*
新IO线
*/
$（'#addNewIOLine'）。单击（函数（）{
$（'#IOLine'）。追加(
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“选择一个”+
'---' +
“生产”+
“CPE”+
“CPM”+
“斯威夫特”+
“蛋卷”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'');
});

    #表格容器{
显示：表格；
}
tableRow先生{
显示：表格行；
}
.左表，
.对，
.tableMiddle{
显示：表格单元格；
}
    

    
函数showTargetCheck（即）{
如果（that.value==“CPM”| that.value==“CPE”| that.value==“SWIFT”）{
.parentNode.parentNode.getElementsByClassName（“showTarget”）[0].style.display=“block”；
.parentNode.parentNode.getElementsByClassName（“showImpressions”）[0].style.display=“无”；
}else if（that.value==“鸡蛋”）{
.parentNode.parentNode.getElementsByClassName（“showImpressions”）[0].style.display=“block”；
.parentNode.parentNode.getElementsByClassName（“showTarget”）[0].style.display=“无”；
}否则{
.parentNode.parentNode.getElementsByClassName（“showTarget”）[0].style.display=“无”；
.parentNode.parentNode.getElementsByClassName（“showImpressions”）[0].style.display=“无”；
}
}
开始
终点
产品
选择一个
---
生产
氯化聚乙烯
CPM
敏捷的
鸡蛋
印象
瞄准
印象
比率
粗俗的
网
笔记
+添加新行

    （代表OP发布）
    
如果有人需要参考，请在此输入工作版本：
    

    /*
    Toggle Impressions and Targeting Fields
    */

$('#tableContainer').on('change', 'select', function(e) {
  // get row instance starting from `this` 
  var $row = $(this).closest('.tableRow'),
    currVal = $(this).val(),
    showImpressions = true,
    showTarget = true,
    showDefault = true;

  if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
    showTarget = true;
    showImpressions = false;
    showDefault = false;
  } else if (currVal == "EGGS") {
    showImpressions = true;
    showTarget = false;
    showDefault = false;
  } else if (currVal == "DEFAULT" || currVal == "") {
    showDefault = true;
    showTarget = false;
    showImpressions = false;
  }

  // other conditionals to set flags

  // now toggle instances of classes within row    
  $row.find('.showTarget').toggle(showTarget);
  $row.find('.showImpressions').toggle(showImpressions);
  $row.find('.showDefault').toggle(showDefault);
});

/*
    New IO Line
*/
$('#addNewIOLine').click(function() {
  $('#IOLine').append(
    '<div class="tableRow">' +

    /* DATES */
    '<div class="tableLeft">' +
    '<input type="date"  name="startDate" placeholder="MM/DD/YYYY" class="date">' +
    '</div>' +

    '<div class="tableMiddle">' +
    '<input type="date"  name="endDate" placeholder="MM/DD/YYYY" class="date">' +
    '</div>' +

    /* PRODUCTS */
    '<div class="tableMiddle">' +
    '<select name="products">' +
    '<option value="DEFAULT">Production</option>' +
    '<option value="CPE">CPE</option>' +
    '<option value="CPM">CPM</option>' +
    '<option value="SWIFT">Swift</option>' +
    '<option value="EGGS">Eggs2Go</option>' +
    '</select>' +
    '</div>' +

    /* Show Default */
    '<div class="showDefault">' +
    '<div class="tableMiddle">' +
    '<input type="text" placeholder="N/A" disabled>' +
    '</div>' +

    '<div class="tableMiddle">' +
    '<input type="number" placeholder="N/A" class="imps" disabled>' +
    '</div>' +
    '</div>' +

    /* Show Impressions Only */
    '<div class="showImpressions">' +
    '<div class="tableMiddle">' +
    '<input type="text" placeholder="N/A" disabled>' +
    '</div>' +

    '<div class="tableMiddle">' +
    '<input type="number" placeholder="1000" class="imps">' +
    '</div>' +
    '</div>' +

    /* Show Targeting & Impressions */
    '<div class="showTarget">' +
    '<div class="tableMiddle">' +
    '<input type="text" placeholder="Targeting">' +
    '</div>' +

    '<div class="tableMiddle">' +
    '<input type="number" placeholder="1000" class="imps">' +
    '</div>' +
    '</div>' +

    /* RATES */
    '<div class="tableMiddle">' +
    '<span class="input-symbol-dollar">' +
    '<input type="number" placeholder="0.00" min="0.01" class="rates">' +
    '</span>' +
    '</div>' +


    /* GROSS COST */
    '<div class="tableMiddle">' +
    '<span class="input-symbol-dollar">' +
    '<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
    '</span>' +
    '</div>' +


    /* NET COST */
    '<div class="tableMiddle">' +
    '<span class="input-symbol-dollar">' +
    '<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
    '</span>' +
    '</div>' +

    /* NOTES */
    '<div class="tableRight">' +
    '<input type="text" placeholder="Notes" class="notes">' +
    '</div>' +

    '</div>');
});

    

    /*
切换印象和目标字段
*/
$（'#tableContainer'）。关于（'change'，'select'，函数（e）{
//从“this”开始获取行实例
var$row=$（this）.closest（'.tableRow'），
currVal=$（this.val（），
showImpressions=true，
showTarget=true，
showDefault=true；
如果（currVal==“CPM”| | currVal==“CPE”| | currVal==“SWIFT”）{
showTarget=true；
showImpressions=false；
showDefault=false；
}否则如果（currVal==“鸡蛋”）{
showImpressions=true；
showTarget=false；
showDefault=false；
}else if（currVal==“默认值”| | currVal==“”）{
showDefault=true；
showTarget=false；
showImpressions=false；
}
//设置标志的其他条件
//现在切换行中类的实例
$row.find（'.showTarget'）.toggle（showTarget）；
$row.find（'.showImpressions'）。切换（showImpressions）；
$row.find（'.showDefault'）.toggle（showDefault）；
});
/*
新IO线
*/
$（'#addNewIOLine'）。单击（函数（）{
$（'#IOLine'）。追加(
'' +
/*日期*/
'' +
'' +
'' +
'' +
'' +
'' +
/*产品*/
'' +
'' +
“生产”+
“CPE”+
“CPM”+
“斯威夫特”+
“蛋卷”+
'' +
'' +
/*显示默认值*/
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
/*只显示印象*/
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
/*展示目标和印象*/
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
/*费率*/
'' +
'' +
'' +
'' +
'' +
/*总成本*/
'' +
'' +
'' +
'' +
'' +
/*净成本*/
'' +
'' +
'' +
'' +
'' +
/*注释*/
'' +
'' +
'' +
'');
});

    

    .
    jQuery和内联代码以及本机方法的可怕混合。坚持这样或那样，并且始终如一地说，如果你第一次没有时间做正确的事情……为什么你会有时间再做一遍呢？非常好-谢谢你。我知道我把事情搞砸了。我试图在id旁边添加增量值，使它们都是唯一的，并且应该一直在上课。感谢你的帮助。谢谢你在这方面的帮助