使用Shopify代码操作自定义文本框时遇到问题

Question

我的网站上有一个自定义框，供客户在Shopify平台上输入产品自定义。 根据有条件的参数集出现主框（name =“ properties [Engrave]”），没有问题。 本周，我尝试根据相似的参数（名称=“ properties [Engrave2]”）添加第二个框，但是它似乎无法正常运行。 文本限制不适用于该框（名称=“ properties [Engrave2]”），并且仅在选择“无雕刻”选项时才会隐藏。 在快速摘要中，我尝试使以下3个过程起作用。 我尝试了无数次代码编辑，但收效甚微，不胜感激！

1. 用户未选择雕刻：出现0个文本框
2. 用户选择3个字符的雕刻：1个文本框出现（名称=“ properties [Engrave]”），限制为3个字符
3. 用户选择12个字符的雕刻：出现2个文本框（name =“ properties [Engrave]”，name =“ properties [Engrave2]”），第一个（name =“ properties [Engrave2”“）的字符限制为3个字符，第二个（name =“ properties [Engrave2]”）具有12个字符的限制

的HTML

<p><label for="engrave"><b>Please Engrave:</b></label></p>
<p><input type="text" id="engrave" name="properties[Engrave]" placeholder="Your monogram - 3 character limit..."/></p>
<p><input type="text" id="engrave" name="properties[Engrave2]" placeholder="Your banner message - 12 character limit..." /></p> 

对应的Java

var chk = $("[name='properties[Engrave]']", "[name='properties[Engrave2]']").attr('id');
if(variant.option1 == "No Engravings" || variant.option2 == "No Engravings" || variant.option3 == "No Engravings"){
  $("[name='properties[Engrave]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
  $("[name='properties[Engrave2]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
}

else if(variant.option1 == "3 Characters or Less" || variant.option2 == "3 Characters or Less" || variant.option3 == "3 Characters or Less"){
  $("[name='properties[Engrave]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",3);
    $("#" + chk).parent().siblings("p").show();
  });
  $("[name='properties[Engrave2]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
}

else if(variant.option1 == "12 Characters or Less" || variant.option2 == "12 Characters or Less" || variant.option3 == "12 Characters or Less"){ 
  $("[name='properties[Engrave]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",3);
    $("#" + chk).parent().siblings("p").show();
   });  
  $("[name='properties[Engrave2]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",12);
    $("#" + chk).parent().siblings("p").show();
   });            
} 

非常感谢您，如果需要任何说明，请告诉我。

Answer 1

我已经测试了您的代码，可以在以下位置检查： http : //jsfiddle.net/mig1098/nfrcw03n/

尝试更改：

var variant = {
    option1:'12 Characters or Less',
    option2:'12 Characters or Less',
    option3:'12 Characters or Less',
}