java无法使用Shopify代码处理自定义文本框

Question

我在我的网站上有一个定制框，供客户在Shopify平台上输入产品定制。主框（name=“properties[雕刻]”）基于一组有条件的参数显示，没有问题。本周，我尝试根据类似的参数（name=“properties[雕刻2]”）添加第二个框，但它似乎无法正常工作。文本限制不适用于框（name=“properties[雕刻2]”），仅在选择“无雕刻”选项时才会隐藏。在一个简短的总结中，我试图让以下3个过程正常运行。我尝试过多次编辑代码，但收效甚微，非常感谢您的帮助

1. 用户选择不雕刻：显示0个文本框
2. 用户选择3个字符的雕刻：显示1个文本框（name=“properties[雕刻]”），限制为3个字符
3. 用户选择12个字符的雕刻：显示2个文本框（name=“properties[雕刻]”，name=“properties[雕刻2]”），第一个文本框（name=“properties[雕刻]”）限制为3个字符，第二个文本框（name=“properties[雕刻2]”）限制为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',
}